html - 使表列与其内容一样宽

Question

我通常使用“width: 1px”来使表格列适应其内容。感觉有点hacky。有没有更优雅的方式？

这是一个例子:

td {
  background: orange;
}

tr:nth-child(1n+2) td:first-of-type {
  width: 1px;
}

<table>
  <tr>
    <td colspan=2>This is a long text that makes the table wide.<br> The left column should be as small as possible.</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>Joe</td>
  </tr>
  <tr>
    <td>Age </td>
    <td>30</td>
  </tr>
  <tr>
    <td>City</td>
    <td>New York</td>
  </tr>
</table>

Answer 1

这可能是另一种方法。它可能看起来不那么“hacky”，因为它告诉第二个 td 占用尽可能多的空间。

td, th
{
  background: orange;
}



tr:nth-child(1n+2) td:first-of-type
{
 white-space: nowrap;
}

tr:nth-child(1n) td:last-of-type
{
 width: 100%;
}

<table>
<tr><td colspan=2>This is a long text that makes the table wide.<br>
                  The left column should be as small as possible.</td></tr>
<tr><td>Name test</td><td>Joe</td></tr>
<tr><td>Age </td><td>30</td></tr>
<tr><td>City</td><td>New York</td></tr>
</table>