如何修改单个表格单元格(<td>)宽度且不影响列内其他单元格

没问题！要实现单个<td>单元格自定义宽度且不影响同列其他单元格，核心是绕过表格默认的列宽统一布局机制，这里给你两种实用的解决方案：

方法1：在目标单元格内嵌套容器元素 #

这是最稳妥的方式，通过在需要单独设置宽度的<td>里嵌套一个块级容器（比如<div>），直接给容器设置宽度，让<td>自适应容器的尺寸，同列其他单元格完全不受影响。

示例代码：

<table border="1" class="table table-bordered">
  <tr>
    <td width="25%"><b>SURNAME</b></td>
    <td width="25%"><b>First Names</b></td>
    <td width="10%"><b>Decorations</b></td>
    <td width="20%"><b>Current Appointment</b></td>
    <!-- 自定义宽度的单元格 -->
    <td>
      <div style="width: 80px; overflow: hidden;">
        这里是自定义宽度的内容
      </div>
    </td>
  </tr>
  <tr>
    <td>Smith</td>
    <td>John</td>
    <td>MBE</td>
    <td>Senior Engineer</td>
    <!-- 同列的普通单元格，保持原有列宽 -->
    <td>...</td>
  </tr>
</table>

你可以根据需求调整<div>的width值，加上overflow: hidden还能防止内容超出容器时撑宽单元格。

方法2：直接给设置样式（无需嵌套） #

如果不想额外嵌套元素，可以直接给目标<td>设置宽度，配合white-space: nowrap固定内容不换行，再确保表格使用默认的自动布局（table-layout: auto，这是浏览器默认值，除非你手动改了）。

示例代码：

<table border="1" class="table table-bordered" style="table-layout: auto;">
  <tr>
    <td width="25%"><b>SURNAME</b></td>
    <td width="25%"><b>First Names</b></td>
    <td width="10%"><b>Decorations</b></td>
    <td width="20%"><b>Current Appointment</b></td>
    <!-- 单个自定义宽度的单元格 -->
    <td style="width: 80px; white-space: nowrap;">自定义宽度内容</td>
  </tr>
  <tr>
    <td>Smith</td>
    <td>John</td>
    <td>MBE</td>
    <td>Senior Engineer</td>
    <td>...</td>
  </tr>
</table>

注意事项 #

• 如果你用了Bootstrap的table类，部分版本会默认设置table-layout: fixed，这时候一定要给表格加上style="table-layout: auto;"，否则单个单元格的宽度设置会被列宽规则覆盖。
• 尽量用固定像素值设置宽度，避免用百分比——百分比是相对于列宽计算的，很容易影响同列其他单元格。

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