Html 如何根据内容自动调整表td宽度

首先，请试着看看这个，正如你所看到的，我有一个有很多列的表。我唯一的问题是如何让所有的

td

根据文本的长度调整其宽度，而不包装单词

以下是我的HTML代码：

<div class="content">
    <div class="content-header">

    </div>
    <div class="content-loader">
        <table>
            <tbody>
                <tr>
                    <td>First Name</td>
                    <td>Last Name</td>
                    <td>Gender</td>
                    <td>Birth Date</td>
                    <td>Address</td>
                    <td>Zip Code</td>
                    <td>Nationality</td>
                    <td>Contact Number</td>
                    <td>Email</td>
                    <td>Username</td>
                    <td>Course</td>
                    <td>Year</td>
                    <td>ID Number</td>
                    <td>Subjects</td>
                    <td>Other Fields</td>
                    <td>Other Fields</td>
                    <td>Other Fields</td>
                    <td>Other Fields</td>
                    <td>Other Fields</td>
                    <td>Other Fields</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

---

有人能帮我吗？或者如果已经有人在这里问过，请给我看链接

删除使用CSS设置的所有宽度，并将空白设置为nowrap，如下所示：

.content-loader tr td {
    white-space: nowrap;
}

如果您希望字段完整显示而不显得奇怪，我也会从容器中删除固定宽度（或将

overflow-x:scroll

添加到容器中）

---

请参阅此处的详细信息：

将此样式属性用于无换行：

white-space: nowrap;

---

您还可以使用

display:table

代替表格。div比table灵活得多

例如：

.table{
显示：表格；
边界塌陷：塌陷；
}
.表格.表格行{
显示：表格行；
}
.表格.表格单元格{
显示：表格单元格；
文本对齐：左对齐；
垂直对齐：顶部；
边框：1px纯黑；
}

测试
测试1123
测试
测试123

remove all width and add.content loader table tr td{white space:nowrap；}？由于容器的宽度是固定的，因此容器中的字段太多，无法正确填充。如果你少一点，它可能会自行调整。

white-space: nowrap;