表格设置table-layout:fixed后对单元格宽度设置无效

表格设置 table-layout: fixed 后，对于单元格宽度设置无效的问题，主要是因为表格布局的机制改变了。

在默认情况下，HTML 表格在进行布局时采用的是自适应的布局方式，它会根据表格中的内容来动态计算单元格宽度。这种布局方式的特点是能够保证表格自适应屏幕大小，但是也可能会导致单元格宽度不一致。

而当我们设置 table-layout: fixed 属性后，表格就会采用固定布局方式，也就是说，每一列的宽度都是固定的。这样做的好处是可以提高表格的显示性能，但是也会导致一些问题，比如单元格宽度设置无效。

解决这个问题的方法就是在表格中加上明确的列宽设置，可以使用 width 属性或者 colgroup 标签来设置。

下面是两条示例说明：

示例一：

<table style="table-layout: fixed;">
  <colgroup>
    <col style="width: 100px;">
    <col style="width: 200px;">
  </colgroup>
  <tr>
    <td style="width: 50px;">A</td>
    <td style="width: 150px;">B</td>
  </tr>
</table>

在这个示例中，我们设置了表格布局为固定，为每一列设置了固定的宽度。同时，对于第一列中的单元格，我们又指定了一个比列宽小的宽度，这时单元格的宽度应该是按照指定的宽度来显示，而不是按照表格布局方式动态计算。

示例二：

<table style="table-layout: fixed;">
  <tr>
    <td style="word-wrap: break-word; width: 50px;">这是一个比较长长长长长长长长长的文本</td>
    <td>短文本</td>
  </tr>
</table>

在这个示例中，我们设置了表格布局为固定，并且在第一列中设置一个较小的固定宽度。由于第一列中的内容比较长，如果没有设置 word-wrap: break-word; 属性，它就会溢出单元格而无法显示。而设置了这个属性之后，文本就可以在单元格内自动换行，避免了溢出的问题。