动态表

Question

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

动态列（和表本身）应该像纯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，因为我也有动态列。

Answer 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>

Answer 2

您需要使用：

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