html - CSS表格列宽

我有下面的代码。要打印，第一列希望您将宽度调整为内容大小。第二列希望您调整为其余宽度。我不知道第一列的宽度是多少，因为内容总是会变化。第二列始终为空白。

<table>
    <thead>
        <tr>
            <th colspan="2">Table 1</th>
        </tr>
        <tr>
            <th>Content1</th><th>Content2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Here is the content</td>
            <td></td>
        </tr>
    </tbody>
</table>

最佳答案

如果要动态创建图像后使用某种具有一定宽度的图像（例如，图像），则可以对其中的单元格使用width: auto;。这对于文本来说是无法令人满意的。

该代码应自行说明：

table{
  border: 1px solid;
  width: 100%;
  overflow: hidden;
}
tbody tr td:first-child{
width: auto;
border: 1px solid;
}
tbody tr td:last-child{
width: 100%;
border: 1px solid;
}

<table>
    <thead>
        <tr>
            <th colspan="2">Table 1</th>
        </tr>
        <tr>
            <th>Content1</th><th>Content2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
            <img src="https://i.stack.imgur.com/XZ4V5.jpg">
            </td>
            <td></td>
        </tr>
    </tbody>
</table>

关于html - CSS表格列宽，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55994658/