html - HTML表格单元格列混合固定宽度+百分比

Question

我想做一些非常基本的事情，一个有 4 列的表：2 列应该是 50px，其他 2 列应该占剩余空间的 50%。

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

有没有办法通过table元素来实现这一点，或者使用另一种布局方法（如 flexbox）是唯一的选择？

Answer 1

您可以使用网格布局grid-template-columns

---

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

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

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

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

还应该注意的是table，默认情况下 a 占用尽可能小的宽度，如果我们告诉atable使用 100% 宽度（或您的情况所需的任何宽度），通常会更好。

width: 100%withtable-layout: fixed和 no结合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>

Answer 3

您可以使用可以设计表格的网格系统（Bootstrap），这是一个示例

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