html表-设置列以占用剩余空间，并且至少宽度为300 at。

Question

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

这是一个JSfiddle，显示了我想要做的事情。

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)可以用来解决这个问题吗？

编辑:而且，任何使用div元素而不是table、tr和td元素的解决方案都不能工作，我使用的是一个需要使用table元素的库。

Answer 1

我认为问题在于表的布局:固定的；

根据这里，固定值将设置一个固定的表布局算法。表和列的宽度由表格和col的宽度或第一行单元格的宽度设置。可能是为什么最小宽度不适用于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>

​

Answer 2

使用text-overflow:ellipsis截断文本。

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;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 300px;
}

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

Answer 3

找到了可行的解决方案。您必须添加固定宽度列的宽度，然后为占用剩余空间的列添加最小宽度，并将表的最小宽度设置为此数字。

工作小提琴

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;
  min-width: 700px;
}

table td {
  overflow: hidden;
}

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

td.remaining-width-or-300-pixels {
  background: red;
}