如何将500px宽的表格设置为仅一列100px宽？

当然可以实现，核心是利用CSS的table-layout: fixed属性锁定表格布局，再单独指定列的宽度。

实现代码示例 #

CSS 代码

table {
  border: 1px solid black;
  table-layout: fixed; /* 固定表格布局，确保宽度严格生效 */
  width: 500px; /* 表格总宽度 */
}

th, td {
  border: 1px solid black;
  width: 100px; /* 单列宽度 */
}

HTML 代码

<table>
  <tr>
    <th>标题列</th>
  </tr>
  <tr>
    <td>内容单元格</td>
  </tr>
</table>

效果说明 #

设置table-layout: fixed后，表格会严格遵循你指定的总宽度（500px），而列的宽度会被固定为100px，剩余的400px空间会以空白形式保留在表格内（默认左对齐，列靠左侧显示）。如果需要调整列的位置，比如居中显示，可以给单元格添加text-align: center样式，或者给表格设置内边距来调整空白分布。

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