HTML表格设置一列宽度，而其余列适合内容，而表格宽度设置为自动答案

【问题标题】：HTML table set one column width while the rest of the columns fit the content while the table width is set to autoHTML表格设置一列宽度，而其余列适合内容，而表格宽度设置为自动
【发布时间】：2019-07-22 20:14:11
【问题描述】：

我有一个宽度为 1280 像素且溢出设置为自动的父容器。这个元素的子元素是一个有 14 列的表，我希望每一列都适合内容，其中空白设置为 nowrap。这会将表格拉伸到比父容器的宽度更宽，并且会显示一个滚动条。但我希望一列具有 400 像素的固定宽度并将空白设置为正常，以便文本内容在其宽于 400 像素时将换行。我怎样才能做到这一点？我玩过 table-layout: fixed，但没有硬编码表格宽度，我无法设置列宽。

【问题讨论】：

您能添加您的代码吗？实际代码胜过关于代码的故事

标签： html css responsive

【解决方案1】：

我看到的最简单的方法是重置display，因为它到处都是white-space，但对于某处的一列甚至一个单元格，此列或单元格将至少是一行文本，它不应该很受关注。

以下 3 个示例

table {
  table-layout:fixed;/* or not */
}
td {
  white-space:nowrap;
  border:solid;
  background:lightgreen;
}
table:first-of-type td:first-child,/* first example */
table + table  td:nth-child(2) ,/* second example , another column selected */
table + table + table   td:nth-child(5) /* third example, 2 columns BUT NOT side by side */{
  display:block;
  width:100px;
  white-space:normal;
  background:lightblue;
}

<table>
  <tr>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR Mlhb </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR Mlhb ZRRZ RzR lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
</table>
<table>
  <tr>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR Mlhb </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR Mlhb ZRRZ RzR lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
</table>
<table>
  <tr>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR Mlhb </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR Mlhb ZRRZ RzR lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
</table>

显示为block 的单元格不再是table-layout 行为的一部分，因此您可以调整其大小或设置最小或最大大小。（这是几年前模仿 flex 或 grid 的一种方式）

为了好奇 table-layout 部分损坏时的行为：

table,
td {
  border: solid;
}

td {
  padding: 0.5rem
}

.block {
  display: block;
}

.block+.block {
  margin-top: 3px;
}

<table>
  <tr>
    <td>cell</td>
    <td class="block"> cell turned into block</td>
    <td class="block"> cell turned into block</td>
    <td>cell</td>
    <td class="block"> cell turned into block</td>
    <td class="block"> cell turned into block</td>
    <td>cell</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

如果该列有 id，那么不妨试试这个

<!-- your code for table -->
<script>
    var i = document.getElementById("column-id");
    i.style.width = "400px";
    i.style.whiteSpace = "normal";
</script>

这就是我会尝试的，我希望这会有所帮助。

【讨论】：

为什么要用javascript来设置css？
如果添加 Bykoo 的代码，我的答案会更好