Chrome扩展弹窗表格CSS布局：仅第二列换行且自适应宽度

直接上可行的CSS方案，完美匹配你的需求：

核心思路 #

通过弹窗容器的自适应宽度设置，配合表格的自动布局逻辑，指定第二列填充剩余空间并允许换行，其余列强制不换行，实现弹窗和表格随内容自适应宽度、最大800px限制，且仅第二列在宽度不足时换行。

完整代码示例 #

popup.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
        <th>列4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>不换行内容1</td>
        <td>超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容</td>
        <td>不换行内容3</td>
        <td>不换行内容4</td>
      </tr>
      <tr>
        <td>短内容1</td>
        <td>短内容2</td>
        <td>短内容3</td>
        <td>短内容4</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

popup.css

/* 弹窗容器：自适应内容宽度，最大限制800px */
html, body {
  margin: 0;
  padding: 8px;
  max-width: 800px;
  width: fit-content;
  box-sizing: border-box;
}

/* 表格：占满弹窗宽度，自动计算列宽 */
table {
  border-collapse: collapse;
  width: 100%;
  table-layout: auto;
}

/* 默认所有单元格不换行 */
td, th {
  border: 1px solid #ddd;
  padding: 8px;
  white-space: nowrap;
}

/* 第二列：允许换行，填充剩余宽度 */
td:nth-child(2), th:nth-child(2) {
  white-space: normal;
  width: 100%;
}

方案说明 #

1. 弹窗自适应宽度：html, body 使用 width: fit-content 让容器仅撑开到内容所需宽度，max-width: 800px 限制最大宽度，解决内容少时留白的问题。
2. 表格占满弹窗：表格设置 width: 100% 继承容器宽度，确保表格始终填充满弹窗空间。
3. 指定列换行：所有列默认 white-space: nowrap 强制不换行，第二列通过 white-space: normal 允许换行，同时 width: 100% 让它优先填充剩余宽度，当容器达到最大800px时，第二列会自动换行压缩高度，其他列保持原有宽度不换行，避免整体出现横向滚动条。

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