CSS：防止列在显示中增长：table

Question

我有一个有 2 列和 2 行的 table。我希望第一列只占用所需的 space，但它占用了 space:

的 50%

.table {
  display: table;
  width: 100%;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

<div class='table'>
  <div class='table-row'>
    <div class='table-cell a'>a1</div>
    <div class='table-cell b'>b1</div>
  </div>
  <div class='table-row'>
    <div class='table-cell a'>a2</div>
    <div class='table-cell b'>b2</div>
  </div>
</div>

第一列的内容宽度可变，所以我无法在该列上设置静态宽度。

使用 table 显示，我怎样才能使第一列仅占用 space 所需要的空间？任何指针将不胜感激！

Answer 1

您可以为第一列中的所有单元格指定 0px 的宽度。当内容大于指定宽度时，将忽略宽度参数。内容最大的单元格将决定第一列的总宽度。

.table {
  display: table;
  width: 100%;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

.table-cell.a {
  width: 0px;
}

<div class='table'>
  <div class='table-row'>
    <div class='table-cell a'>a1</div>
    <div class='table-cell b'>b1</div>
  </div>
  <div class='table-row'>
    <div class='table-cell a'>a2</div>
    <div class='table-cell b'>b2</div>
  </div>
</div>

CSS：防止列在显示中增长：table

CSS: prevent column from growing in display: table

html

css

css-tables