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

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

回答

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>