Overflow in HTML table cell

Question

I have an issue I'm trying to solve about table-cell display and its content which make its parent width grow despite of table-cell fixed width and overflow defined.

JSFiddle: http://jsfiddle.net/8cevryh9/

<table border="3">
    <tr>
        <td style="width: 20px">1</td>
        <td style="width: 80px; overflow:hidden;">
            <div style="width:200px">
                FAT CONTENT
            </div>
        </td>
        <td style="width: 30px">3</td>
    </tr>
</table>

Here 2nd cell is 200px width, I would have it stay 80px and the content overflow hidden. Anyone an idea ?

set a max-width not solve this issue?

jbutler483
– jbutler483

2014-12-22 17:26:24 +00:00
Commented Dec 22, 2014 at 17:26 — jbutler483
– jbutler483, Commented Dec 22, 2014 at 17:26

j08691 · Accepted Answer · 2014-12-22 17:27:53Z

3

Set a width on the table, as well as the table-layout to fixed:

table {
  table-layout: fixed;
  width: 130px;
}

<table border="3">
  <tr>
    <td style="width: 20px">1</td>
    <td style="width: 80px; overflow:hidden;">
      <div style="width:200px">
        FAT CONTENT
      </div>
    </td>
    <td style="width: 30px">3</td>
  </tr>
</table>

answered Dec 22, 2014 at 17:27

j08691

208k33 gold badges269 silver badges281 bronze badges

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

1 Comment

G. Ghez Over a year ago

Thank you very much ! Didn't know this style attribute table-layout.

Collectives™ on Stack Overflow

Overflow in HTML table cell

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related