设置table为width:100%时，如何阻止指定图片列自动扩展？

当然可以做到！你已经用到了table-layout: fixed，这是关键的一步——这个属性会让表格优先遵循你指定的列宽，而不是自动根据内容拉伸。接下来只需要给图片对应的列（表头和单元格）设置一个固定宽度就可以了。

具体步骤： #

• 给图片列的<th>和对应的<td>添加一个统一的类（比如icon-column），方便统一设置样式。
• 在CSS里给这个类指定固定宽度（宽度值可以根据你的图片大小调整，比图片宽一点留些边距会更美观），还可以加上text-align: center让图片居中显示。

修改后的代码示例： #

CSS：

body {}
img.consoleIcon, img.ConsoleIconColumnHeader { 
  width: 17px !important; 
  height: 17px !important; 
  vertical-align: middle; 
}
table td, table th { 
  border: 1px solid #d0d0d0; 
  table-layout: fixed; 
  border-collapse: collapse !important; 
}
/* 新增：固定图标列宽度 */
.icon-column {
  width: 40px;
  text-align: center;
}

HTML：

<table style="width:100%">
  <thead>
    <th>Name</th>
    <th>Age</th>
    <th class="icon-column">Facebook</th>
    <th>Twitter</th>
  </thead>
  <tbody>
    <td>Shubh</td>
    <td>33</td>
    <td class="icon-column">
      <a>
        <img title="FB" class="consoleIcon" src="https://image.flaticon.com/icons/svg/124/124010.svg">
      </a>
    </td>
    <td></td>
  </tbody>
</table>

原理说明： #

table-layout: fixed会让表格的布局规则变成“固定布局”，表格的总宽度由width属性决定，各列的宽度优先使用你明确指定的值。这样当表格设为100%宽度时，其他没有指定宽度的列会自动平分剩余的空间，而图片列则会严格保持你设置的固定宽度，不会被拉伸。

内容的提问来源于stack exchange，提问作者Shubh