动态表中的固定宽度列

I have a table that shall be dynamic (which means I cannot use table-layout: fixed) but that shall have several fixed-width columns in it. The fixed-width columns shall also support colspans of larger than 1.

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

The dynamic columns (and the table itself) should work just like normal table cells in pure HTML:

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

• Data shall never get cut off, even when the viewport is too small
• 即使视口太小，数据也不会被切断
• When the table does not fit the viewport, it shall be wider than the viewport
• 当表格不适合视口时，它应该比视口宽

The fixed-width colums should work like this:

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

• Always have a fixed width
• 始终有固定的宽度
• Cut off any data that does not fit into it
• 切断任何不适合的数据

I tried three approaches, none of them works:

我尝试了三种方法，但没有一种方法可行：

• Defining the widths in the first table row
• 定义第一个表行中的宽度
• Defining the widths in a colgroup/col section of the table
• 在表的colgroup / col部分中定义宽度
• Inserting a <div> into the fixed-width cells
• 将
  插入固定宽度的单元格中

Nothing works.

什么都行不通。

JS-Fiddle

JS-小提琴

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>

As I said, I cannot use table-layout: fixed because I also have dynamic columns.

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

2 个解决方案

#1

You can use table-layout: fixed if you have a suitable min-width placed on the table to prevent overflow of the dynamically sized column:

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

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

Example

Note that the width attribute is deprecated and the CSS property should be used to size your columns and table.

请注意，不推荐使用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

You need to use:

你需要使用：

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