CSS display table ignores width

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/

Sinan · Accepted Answer · 2013-09-29 10:57:53Z

3

You can try "table-layout: fixed"

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

answered Sep 29, 2013 at 10:57

Sinan

5,97812 gold badges43 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nxa · Accepted Answer · 2013-09-29 10:55:54Z

1

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/

answered Sep 29, 2013 at 10:55

nxa

3,0623 gold badges23 silver badges45 bronze badges

3 Comments

user2738640 Over a year ago

The image is not the problem. The idea was that if I have specified the width for the li, it should hide the overflowing content instead of increasing the width.

nxa Over a year ago

Nope, its not the way <table>, <td>, <th> works. These elements will expand itself to contain the content inside it. This is the beauty of tables. Using word-break would break texts to fall in next line and setting image max-height for image means you are safer!

Bhojendra Rauniyar Over a year ago

@user2738640 this is best answer. So I think you should accept this.

Bhojendra Rauniyar · Accepted Answer · 2013-09-29 11:07:51Z

1

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

answered Sep 29, 2013 at 11:07

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Comments

Anton D · Accepted Answer · 2013-09-29 10:51:49Z

0

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/

answered Sep 29, 2013 at 10:51

Anton D

1,3761 gold badge12 silver badges19 bronze badges

1 Comment

Anton D Over a year ago

important isn't necessary, removed it.

jsea · Accepted Answer · 2013-09-29 11:07:22Z

0

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)

edited Sep 29, 2013 at 11:07

answered Sep 29, 2013 at 10:54

jsea

4,0871 gold badge20 silver badges22 bronze badges

Comments

caramba · Accepted Answer · 2013-09-29 12:00:13Z

0

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;
}

edited Sep 29, 2013 at 12:00

answered Sep 29, 2013 at 10:51

caramba

22.5k20 gold badges94 silver badges134 bronze badges

2 Comments

user2738640 Over a year ago

I'm using display table because I want to have the same height for each of the li (for the border).

caramba Over a year ago

@user2738640 that is no reason to use display:table; --> jsfiddle.net/xbmEQ/13

Collectives™ on Stack Overflow

CSS display table ignores width

6 Answers 6

Comments

3 Comments

Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

3 Comments

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related