Table cell width declaration is ignored - css

Question

I have an horizontal menu bar that can have from 1 to 4 links.
I would like that that each link will have a width of 25% not depending by number of them (so in case of only 3 links, menu bar should be only 75% of another one with 4 links).
Using floats reach the target but in case of longer text spanned across 2 rows, is not possible to adjust other links' height accordingly, so I use display:table-cell that solve this issue, but in case of 3 links, completely ignore width:25% and it renders like if width would be 33%.
<div class="container">
<div class="block">
Link 1
</div>
<div class="block">
Link 2
</div>
<div class="block">
<a href="#">
Link 3 with very long text tha span across 2 rows
</a>
</div>
</div>
.container {
display: table;
width: 100%;
border:solid 1px blue;
}
.block {
border: 1px solid red;
display: table-cell;
width: 25%;
}
Please, look at this jsFiddle in order to see both cases.
Desired result is that second menubar links continue to have the same width of first one, not becoming 33%.
I tried also to add table-layout:fixed as read in other threads but was unuseful
How to solve this?

Answer 1

When you ask a browser to display a three-column table so that the width of each column is 25% of the total width, you are making a logically impossible request. You cannot have the width of a table to be 75% of itself. Browsers then tend to divide the space evenly to the columns.
A simple fix is to remove width: 100% from the rule for .container and to set width: 75% on the second “table” (div element formatted as a table).

Answer 2

How about using flexbox?
.container {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
border:solid 1px blue;
}
.block {
border: 1px solid red;
max-width: 25%;
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
a{
display: block;
padding: 10px;
}
In this way you can easily adjust your .block element's height accordingly...
here's a fiddle with my solution: http://jsfiddle.net/o462q4ce/

Answer 3

Please check this.
var n = $(".container .block").length;
var w = (100/n);
$(".container .block").width(w+'%');
See jsFiddle. Hope it helps.

Answer 4

Using a combination of :last-child and :nth-child() selector you can target exactly the div.block you need to modify.
Unfortunately using table layout doesn't allow you to manage margin and width as I wish...
anyway here is a solution could fit for your needs
.block:last-child:nth-child(3) {width:auto; padding-right:25%;}
.block:last-child:nth-child(2) {width:auto; padding-right:50%;}
.block:last-child:nth-child(1) {width:auto; padding-right:75%;}
in this jsFiddle you can see these selectors in action: http://jsfiddle.net/5t0fq1sy/