如何限制表格内长下拉选择框宽度以避免撑开表格，且不影响短选项选择框的自适应宽度？

我太懂这个痛点了——既要让带超长选项的select乖乖待在表格里，别把整个表格撑出视口，又得让短选项的select保持窄窄的自适应宽度，不能一刀切全设100%宽。之前维护legacy系统的时候也碰到过一模一样的问题，给你分享两个亲测有效的解决方案：

方案1：现代浏览器极简方案（推荐） #

利用 CSS 的 width: fit-content 和表格的固定布局特性，不需要修改原有HTML结构，代码非常清爽：

table {
  width: 100%;
  table-layout: fixed; /* 强制表格遵守设置的100%宽度，不被内容撑开 */
}

select {
  width: fit-content; /* 短选项select只占内容所需宽度 */
  max-width: 100%; /* 长选项select自动收缩到td的宽度内 */
}

效果说明： #

• 表格会牢牢保持100%宽度，不管内部内容多长
• 带短选项的select还是原来的窄宽度，完全不会被强制撑满
• 带长选项的select会被限制在td的宽度范围内，不会超出表格

如果是多列表格，只需要给每个td设置对应的宽度比例（比如 td:nth-child(1) { width: 40%; }），table-layout: fixed会自动按比例分配宽度，非常灵活。

方案2：兼容旧浏览器（如IE）的方案 #

如果你的系统还需要兼容不支持 fit-content 的旧浏览器，就给select套一个轻量的容器，通过容器来做宽度约束：

table {
  width: 100%;
}

td {
  max-width: 100%;
  overflow: hidden; /* 防止td被内容撑开 */
}

.select-wrapper {
  display: inline-block; /* 容器自适应select的内容宽度 */
  max-width: 100%; /* 容器最大宽度不超过td */
}

select {
  max-width: 100%; /* select不超过容器宽度 */
}

对应的HTML修改（只需要给select加个包裹div）：

<table border="1">
  <tbody>
    <tr>
      <td>
        <div class="select-wrapper">
          <select>
            <option>Very long option Very long option Very long option Very long option Very long option Very long option Very long option Very long option Very long option Very long option Very long option Very long option</option>
          </select>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="select-wrapper">
          <select>
            <option>Short option</option>
          </select>
        </div>
      </td>
    </tr>
  </tbody>
</table>

效果说明： #

• 原理和方案1一致，只是用inline-block容器代替了fit-content的作用
• 短选项select依然保持窄宽度，长选项select被限制在表格内
• 完美兼容IE11及更旧的浏览器

为什么之前的“宽度100%”方案不行？ #

你提到的给所有select设width:100%，确实会把短选项的select也强制撑满整个td，破坏了UI的自然感，而上面的两个方案都完美避开了这个问题，既解决了长选项撑开表格的bug，又保留了短选项的自适应特性。

内容来源于stack exchange