TD 设置宽度导致 Table 滚动失效的解决方案

如果设置了 'td' 的宽度，'table' 的滚动可能会失效。这是因为当 'td' 的宽度超过 'table' 的宽度时，'table' 会自动调整宽度以适应 'td' 的宽度，从而取消了滚动功能。

要解决这个问题，可以将 'table' 包裹在一个具有固定宽度和 'overflow: auto' 样式的容器元素中。这样，'td' 的宽度可以超过 'table' 的宽度，同时容器元素会显示滚动条，允许用户水平滚动表格内容。

示例代码如下：

HTML:

<div class='table-container'>
  <table>
    <tr>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
      ...
    </tr>
    ...
  </table>
</div>

CSS:

.table-container {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  table-layout: fixed;
}

td {
  /* 设置 td 的宽度 */
}

这样设置后，如果 'td' 的宽度超过 'table' 的宽度，用户就可以通过水平滚动条来滚动表格内容了。