html - 你如何制作一个从不换行并且自动宽度的表格列？

Question

我需要创建一个两列全宽表，其中:

第 1 列在需要时换行

第 2 列永远不会包装和填充任何空白空间

在此处查看视觉示例:

我在弄清楚这一点时遇到了很多麻烦......这就是我要做的事情:

table {
  width: 100%;
}

.col-2 {
  white-space: nowrap;
  width: 60%;
  text-align: right;
}

/* Below is arbitrary example CSS, not part of solution */
.container {
  width: 250px;
}
td {
  background: lightblue;
}

<h4>Example A</h4>
<div class="container">
  <table>
    <tr>
      <td class='col-1'>Not much text</td>
      <td class='col-2'>Column 2</td>
    </tr>
  </table>

  <h4>Example B</h2>
    <table>
      <tr>
        <td class='col-1'>This has a lot of text that wraps</td>
        <td class='col-2'>Column 2</td>
      </tr>
    </table>
</div>

请注意，由于 width: 60%，col-1 没有扩展在 col-2 .如果我删除它，那么 col-1默认占用所有空间，这会中断 Example B .
我可以在 flexbox 中使用它，但是当 col-1 时，列没有正确对齐包裹......所以我认为它需要保留一张 table 。
任何想法将不胜感激。谢谢!!

Answer 1

CSS 网格应该这样做:

div {
  display: grid;
  width: 250px;
  grid-gap: 2px;
  grid-template-columns: auto 1fr;
}

.col-2 {
  white-space: nowrap;
  text-align: right;
}

p {
  background: hotpink;
  margin: 0;
}

<h4>Example A</h4>

<div>
  <p class='col-1'>Not much text</p>
  <p class='col-2'>Column 2</p>
  <p class='col-1'>row2</p>
  <p class='col-2'>Column 2</p>
</div>

<h4>Example B</h4>
<div>
  <p class='col-1'>This has a lot of text that wraps</p>
  <p class='col-2'>Column 2</p>
  <p class='col-1'>row2</p>
  <p class='col-2'>Column 2</p>
</div>