CODEWITHSUNDEEP
htmlcsscss-tables
user1251698
user1251698

Reputation: 2143

Table-cell property ignores width

I have set a CSS property table-cell for a div. I have also specified the width for the div and set overflow hidden, but because of the table-cell property the div does not care about the width. If I place any large image, it goes out of the width. How can I use the table-cell and use the fixed width for the div?

.right{
    display: table-cell;
    overflow: hidden !important;
    vertical-align: top;
    width: 400px;
}

Upvotes: 7

Views: 13085

Answers (2)

jamesplease
jamesplease

Reputation: 12869

Strange, this JSFiddle seems to work for me.

What browser are you having problems in?

Also, to force a maximum width for your table cells, use the max-width property. You can see it here, and the code is below.

HTML:

<div class='table'>
  <div class='tr'>
    <div class='right'>hey</div>
  </div>
</div>​

CSS:

.table {
    display: table;
}
.tr {
    display: table-row;
}
.right{
    display: table-cell;
    overflow: hidden !important;
    vertical-align: top;
    max-width: 400px;
    outline: 1px solid #888;
}​

Upvotes: 10

boz
boz

Reputation: 4908

display: table-cell will follow the table sizing rules - if the content is too big, it will expand to make it fit.

Do you really need to use display: table-cell? To make it work, you'd have to wrap it in another div, give it a width of 400 and set it to overflow: hidden but that seems counter-productive.

Upvotes: 5

Related Questions