为什么溢出：隐藏在a中不起作用？

为什么溢出：隐藏在a中不起作用？

需要设置

table-layout:fixed

和 表元件上的合适的宽度，以及

overflow:hidden

和

white-space:nowrap

在桌子上的细胞。

---

例子定宽列

表格的宽度必须与固定宽度的单元格相同（或更小）。

使用一个固定宽度的列：

* {  box-sizing: border-box;}table {  table-layout: fixed;  border-collapse: collapse;  width: 100%;  max-width: 100px;}td {  background: #F00;  padding: 20px;  overflow: hidden;  white-space: nowrap;  width: 100px;  border: solid 1px #000;}<table>  <tbody>    <tr>      <td>        This_is_a_terrible_example_of_thinking_outside_the_box.      </td>    </tr>    <tr>      <td>        This_is_a_terrible_example_of_thinking_outside_the_box.      </td>    </tr>  </tbody></table>

使用多个固定宽度的列：

* {  box-sizing: border-box;}table {  table-layout: fixed;  border-collapse: collapse;  width: 100%;  max-width: 200px;}td {  background: #F00;  padding: 20px;  overflow: hidden;  white-space: nowrap;  width: 100px;  border: solid 1px #000;}<table>  <tbody>    <tr>      <td>        This_is_a_terrible_example_of_thinking_outside_the_box.      </td>      <td>        This_is_a_terrible_example_of_thinking_outside_the_box.      </td>    </tr>    <tr>      <td>        This_is_a_terrible_example_of_thinking_outside_the_box.      </td>      <td>        This_is_a_terrible_example_of_thinking_outside_the_box.      </td>    </tr>  </tbody></table>

固定和流体宽度色谱柱

必须设置 表格的宽度，但是任何多余的宽度都可以由流体单元简单地获取。

对于多列，固定宽度和流体宽度：

* {  box-sizing: border-box;}table {  table-layout: fixed;  border-collapse: collapse;  width: 100%;}td {  background: #F00;  padding: 20px;  border: solid 1px #000;}tr td:first-child {  overflow: hidden;  white-space: nowrap;  width: 100px;}<table>  <tbody>    <tr>      <td>        This_is_a_terrible_example_of_thinking_outside_the_box.      </td>      <td>        This_is_a_terrible_example_of_thinking_outside_the_box.      </td>    </tr>    <tr>      <td>        This_is_a_terrible_example_of_thinking_outside_the_box.      </td>      <td>        This_is_a_terrible_example_of_thinking_outside_the_box.      </td>    </tr>  </tbody></table>