动态表中的固定宽度列答案

【问题标题】：Fixed-width columns in a dynamic table动态表中的固定宽度列
【发布时间】：2016-09-28 08:03:51
【问题描述】：

我有一个应该是动态的表（这意味着我不能使用table-layout: fixed），但它应该有几个固定宽度的列。固定宽度的列也应支持大于 1 的 colspan。

动态列（和表格本身）应该像纯 HTML 中的普通表格单元格一样工作：

数据永远不会被截断，即使视口太小
当表格不适合视口时，应比视口宽

固定宽度的列应该像这样工作：

始终具有固定宽度
切断任何不适合它的数据

我尝试了三种方法，它们都不起作用：

定义表格第一行的宽度
在表格的 colgroup/col 部分定义宽度
将<div> 插入固定宽度的单元格

没有任何作用。

JS-Fiddle

table {
  border-collapse: collapse;
}
td {
  border: 3px solid red;
}
.fw {
  overflow: hidden;
  height: 20px;
}

<table width="100%">
  <colgroup>
    <col width="100%">
      <col width="50px">
        <col width="50px">
  </colgroup>
  <tr>
    <td>My dynamic cell shall be greedy and take up all available space</td>
    <td class=fw nowrap>
      <div class=fw>My first fixed-width cell shall be of fixed width</div>
    </td>
    <td class=fw>..</td>
  </tr>
  <tr>
    <td>dynamic</td>
    <td class=fw colspan=2>Fixed cells shall also support multiple colspans</td>
  </tr>
</table>

正如我所说，我不能使用table-layout: fixed，因为我也有动态列。

【问题讨论】：

this example I made 和table-layout: fixed 有什么问题？ 2 列固定为每列 100 像素，第二行包含 200 像素的 colspan。流体列的大小调整得很好。
@misterManSam：当视口变得太小时，.fluid 列会消失 - 我尝试将“min-width: 200px”添加到 .fluid 作为解决方法，但这也不起作用。 .fluid 列应该像普通的表格单元格一样工作 - 它永远不会溢出或切断数据。
你确定不能只place a suitable min-width on the table itself？
@misterManSam：是的，这似乎可行，谢谢 - 写一个答案，我会接受它（经过几次测试......）

标签： html css

【解决方案1】：

您可以使用table-layout: fixed，如果您在表格上放置了合适的min-width 以防止动态大小的列溢出：

table {
    table-layout: fixed;
    width: 100%;
    min-width: 400px;
}

示例

请注意，width 属性已弃用，应使用 CSS 属性来调整列和表的大小。

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  min-width: 400px;
}
td {
  border: 3px solid red;
  overflow: hidden;
}
.fluid {
  width: 100%;
}
.fixed {
  width: 100px;
}

<table>
  <colgroup>
    <col class="fluid">
    <col class="fixed">
    <col class="fixed">
  </colgroup>
  <tr>
    <td>My dynamic cell shall be greedy and take up all available space</td>
    <td>My first fixed-width cell shall be of fixed width</td>
    <td>....</td>
  </tr>
  <tr>
    <td>dynamic</td>
    <td colspan="2">Fixed cells shall also support multiple colspans</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

你需要使用：

min-width: 50px;
max-width: 50px;

【讨论】：