HTML table 单元格列混合固定宽度 + 百分比

Question

我想做一些非常基本的事情，一个有 4 列的 table：2 列每列应为 50px，其他 2 列每列应占剩余 space 的 50%。

我很惊讶地发现 calc() 无法设置 table 单元格的宽度。所以做类似td { width: calc(50% - 100px); }的事情是不可能的。

有没有办法使用 table 元素实现此目的，或者使用其他布局方法（如 flexbox）是唯一的选择？

Answer 1

你可以使用可以设计的网格系统(Bootstrap)table，这是一个示例

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Answer 2

您可以使用带有 grid-template-columns

的网格布局

grid-template-columns: 50px 50px 1fr 1fr;

在您的网格中定义 4 列，分别代表 50px、50px 和 1fr 占剩余 space 的一小部分（两次）

.grid {
  display: grid;
  grid-template-columns: 50px 50px 1fr 1fr;
  grid-gap: 1px;
}

.col {
  height: 100px;
  background-color: red;
}

.col:nth-child(2) {
  background-color: yellow;
}

.col:nth-child(3) {
  background-color: teal;
}

.col:nth-child(4) {
  background-color: navy;
}

<div class="grid">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Answer 3

表格的宽度计算有点笨拙，但可以通过使用 table-layout: fixed 进行改进，因为这样就不再根据单元格内部的内容计算单元格宽度。然后你甚至可能不再需要 calc()，尽管你绝对可以。

还需要注意的是，table默认占用可能的最小宽度，如果我们告诉table通常会更好使用 100% 宽度（或您需要的任何宽度）。

width: 100% 结合 table-layout: fixed 而没有 calc() 给出以下结果：

table {
  width: 100%;
  table-layout: fixed;
}

td {
  background: #eee;
  height: 70px;
}

td.fixed {
  width: 50px;
}

td.rest {
  width: 50%;
  background: #fca;
}

<table>
  <tbody>
    <tr>
      <td class="fixed">1</td>
      <td class="fixed">234</td>
      <td class="rest">a</td>
      <td class="rest">bcd efg</td>
    </tr>
  </tbody>
</table>

HTML table 单元格列混合固定宽度 + 百分比

HTML table cell column mixing fixed widths + percentages

html

css

html-table