html table -- 设置column占用剩余空间，宽度至少300px

Question

如何在 html 表格中间创建一列，并使其填充剩余空间，同时最小宽度为 300px？

Here's a JSfiddle showing what I'm trying to do.

HTML:

<table>
  <tr>
    <td class="fixed-width">A set width column</td>
    <td class="remaining-width-or-300-pixels">
    A column with long content, to take the remaining space, and at least 300 pixels. It's OK if it has to trucate.
    </td>
    <td class="fixed-width">A set width column</td>
  </tr>
</table>

CSS:

table {
  display: table;
  width: 100%;
  table-layout: fixed;
  white-space: nowrap;
  color: white;
}

table td {
  overflow: hidden;
}

td.fixed-width {
  background: blue;
  width: 200px;
}

td.remaining-width-or-300-pixels {
  background: red;
  overflow: hidden;
  min-width: 300px;
}

如您所见，当您调整面板的宽度时，min-width: 300px; 被完全忽略。

我可以使用任何 css(不是 javascript)变通方法来实现它吗？

Edit: also, any solution that uses div elements instead of table, tr, and td elements won't work, I'm using a library that requires the use of the table element.

Answer 1

我认为问题出在 table-layout: fixed;

根据 here , fixed 值将设置一个固定的表格布局算法。表格和列的宽度由表格和列的宽度或第一行单元格的宽度设置。可能是最小宽度不适用于 td 的原因。

table {
  display: table;
  width: 100%;
  /* table-layout: fixed; */
  white-space: nowrap;
  color: white;
}

table td {
  overflow: hidden;
}

td.fixed-width {
  background: blue;
  width: 200px;
  min-width: 200px;
}

td.remaining-width-or-300-pixels {
  background: red;
  overflow: hidden;
  min-width: 300px;
 
}

<table>
  <tr>
    <td class="fixed-width">A set width column</td>
    <td class="remaining-width-or-300-pixels">
    A column 
    </td>
    <td class="fixed-width">A set width column</td>
  </tr>
</table>