Question

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

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

Answer 1

这将调整内容的表格宽度

table {
    border: 1px solid black;
    table-layout: fixed;
    width: 200px;
}

th, td {
    border: 1px solid black;
    width: 100px;
    overflow: hidden;
}

并删除：

colspan="2"

在html文件中

Answer 2

如果您在动态创建图片后使用诸如具有一定宽度的图片之类的图片，则可以对其所在的单元格使用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>

Answer 3

struct

使用表的“ nowrap”属性

CSS表格栏宽度

3 个答案: