Html 表格布局：固定；文本溢出单元格时不起作用

发布于11月12日

下表应以给定宽度(以像素为单位)调整所有列的大小:

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>

然而，尽管在td个元素上设置了overflow: hidden，但长文本会使整个列展开.

推荐答案

除了table-layout: fixed;之外，您还需要将width设置为table元素，才能获得所需的行为.见https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

单元格使用Overflow属性来确定是否剪裁任何溢出的内容but only if the table has a known width；否则，它们不会使单元格溢出.

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>