CSS display table ignores width - html

Question

I have multiple li items floating left and I want to set a right border around them so that all of them get the same height for the border. Therefor I'm using the display:table; However it ignores the width of the li. How can I force to use same width for all li items?
HTML:
<ul>
<li>a</li>
<li><img src="http://farm8.staticflickr.com/7437/9982948185_19ae813ee0_n.jpg"/></li>
<li>b</li>
</ul>
CSS:
ul{
display: table;
}
ul li{
display: table-cell;
width: 50px !important;
border-right: 1px solid red;
}
Demo:
http://jsfiddle.net/xbmEQ/

Answer 1

You can try "table-layout: fixed"
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

Answer 2

Your image is bigger so you are having issues. Set max-width to image:
ul li img {
max-width:100%;
}
Also use word break on li,
Demo: http://jsfiddle.net/shekhardesigner/xbmEQ/7/

Answer 3

You'll also need to define the width for the img tag because img tag is taking full width So you can set the image width to 50px but better way to define width 100%.
If you don't want to specify anything inside the li tag then you may set display: inline-block; overflow: hidden; to your li instead of using display: table-cell; to li
demo

Answer 4

Do you want to make the image 50px wide? In that case you just have to add this piece of code:
ul li img{
width: 50px;
}
http://jsfiddle.net/xbmEQ/3/

Answer 5

You can set the min-width of the li items so that they do not shrink below 50px.
http://jsfiddle.net/xbmEQ/5/
It keeps the heights of all the li items matching (and dynamic) as you want for matching border heights. It also keeps all the li items 50px wide unless their content exceeds 50px (like your image).
(I have not tested this in any other browser than Chrome)

Answer 6

not real sure what you're trying to achive but what about this fiddle
ul{}
ul li{
display: inline-block;
width: 50px;
border: 1px solid red;
overflow:hidden;
}
EDITED FIDDLE AND CSS, added height attribute.
fiddle 2.0
ul li{
display: inline-block;
height:100px;
width: 50px;
border: 1px solid red;
overflow:hidden;
}