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 ）解决方法吗？

编辑：同样，使用div元素而不是table，tr和td元素的任何解决方案都行不通，我使用的是一个需要使用table元素。

Answer 1

我认为问题出在 table-layout：已修复；

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

WITH cte AS (
    SELECT
        COUNT(CASE WHEN status_date BETWEEN '2018-11-01' AND '2019-01-31' THEN 1 END) AS cnt1,
        COUNT(CASE WHEN status_date BETWEEN '2019-02-01' AND '2019-04-30' THEN 1 END) AS cnt2,
        COUNT(CASE WHEN status_date BETWEEN '2019-05-01' AND '2019-07-31' THEN 1 END) AS cnt3
    FROM data
    WHERE status IN ('ACCEPTED', 'REJECTED', 'CANCELLED')
)

SELECT cnt1 FROM cte
UNION ALL
SELECT cnt2 FROM cte
UNION ALL
SELECT cnt3 FROM cte;

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

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

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

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

table td {
  overflow: hidden;
}

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

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

html表-设置列以保留剩余空间，并且宽度至少为300px

3 个答案: