html - 动态表中的固定宽度列

Question

我有一个应该是动态的表(这意味着我不能使用 table-layout: fixed )但其中应该有几个固定宽度的列。固定宽度的列还应支持大于 1 的 colspan。

动态列(和表格本身)应该像纯 HTML 中的普通表格单元格一样工作:

• 数据永远不会被截断，即使视口(viewport)太小也是如此
• 当表格不适合视口(viewport)时，它应该比视口(viewport)宽

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

• 总是有一个固定的宽度
• 切断任何不适合它的数据

我尝试了三种方法，但都不起作用:

• 定义表格第一行的宽度
• 在表格的 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因为我还有动态列。

Answer 1

你可以使用table-layout: fixed如果你有一个合适的min-width放置在 table 上以防止动态溢出大小列:

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>