table-layout: fixed; not working when text overflows a cell-CodePudding

The following table should have all columns sized by the given widths in pixels:

table {
  border-collapse: collapse;
  table-layout: fixed;
}

td {
  border: 1px solid black;
  overflow: hidden;
}

<table>
  <col style="width: 50px">
  <col style="width: 40px">
  <col style="width: 30px">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>supersuperlooooongcontent</td>
  </tr>
</table>

However, although overflow: hidden is set on the td elements, the long text makes the entire column expand.

CodePudding user response：

You need to set width to the table element, in addition to table-layout: fixed;, to obtain desired behavior. See https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

Cells use the overflow property to determine whether to clip any overflowing content, but only if the table has a known width; otherwise, they won't overflow the cells.

table {
  border-collapse: collapse;
  table-layout: fixed;
  width:120px;

}

td {
  border: 1px solid black;
  overflow: hidden;
}

<table>
  <col style="width: 50px">
  <col style="width: 40px">
  <col style="width: 30px">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>supersuperlooooongcontent</td>
  </tr>
</table>