Equal padding for display: table-cell

HTML & CSS
1

I have a fixed width horizontal navigation:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">News &amp; Reviews</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Tickets</a></li>
    <li><a href="#">Cast &amp; Creative</a></li>
    <li><a href="#">Venue</a></li>
  </ul>
</nav>

with the following css:

nav {display: table; width: 700px;}
ul {display: table-row;}
li {display: table-cell; border: 1px solid #ccc; border-collapse: collapse; text-align: center;}
a {display: block; padding: 15px 0;}

Currently the left / right ‘padding’ for the ‘li’ elements is proportional to the length of the text in the ‘a’ element ie. a shorter link will have less ‘padding’ than a longer link.

Is there a way of dividing the available white space equally therefore making the left / right ‘padding’ equal for all ‘li’ elements, without specifying padding in the css?

Thanks.

2

Hm, I doubt it, as the table is stretching to fill the whole <nav>, so I suspect you have to compromise here: either accept it as is or add just the right amount of padding to each <a> to fill up the container. (I’m not fully up to scratch with display: table, though, so I may be missing something.)

3

PHYSICALLY speaking this is illogical, IF you have fixed amount of space (“padding”) in mind.

If you really just want to have FIXED 30px of space between first-letters and the possible remainder of the width of your nav tag empty, use float instead.

hopefully my code will help you get closer to what you wanted to accomplish

if want is evenly sized cells, do as follows


div {display: table; width: 700px; background: pink; border: 1px solid red;table-layout: fixed}
ul {display: table-row;}

li {display: table-cell; border: 1px solid #ccc; border-collapse: collapse; text-align: center;}
a {display: block; padding: 15px 0;}

you can still alter the width of other LIs(cells) by adding classes to them… .longer{width:200px) (all cells with class=“longer” width will be 200px; and the remaining space int he cell will be distributed evenly)

Or as Ralph said you can accept what you have right now.