关于HTML的table表格换行一事_html table的单元格变化,表格会自适应变化,怎么取消-CSDN博客

本文链接：https://blog.csdn.net/danger_man/article/details/115164704

在HTML表格使用中遇到单元格宽度自适应内容的问题，通过设置`table-layout: fixed`样式可以解决。配合`white-space:normal;word-break:break-all;`，可以实现单元格内文字换行并保持固定宽度。这一技巧让表格布局更加可控。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这令人头疼的table

在使用到原生的HTML表格时，总会觉得还是组件香

使用table表格时，单元格的宽度设置总会成为问题，因为table默认的设置是，宽度会随着内容而自适应，即便是设置了固定宽度

<table cellspacing="0" cellpadding="0" width="100%" border="1">
    <thead>
        <tr>
            <th width="50px">123</th>
            <th>456</th>
            <th>789</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td width="50px">asdakdjahdjkadasdakdjahdjkad</td>
            <td>adadadd</td>
            <td>asda</td>
        </tr>
    </tbody>
</table>

在这里插入图片描述

百思不得其解，想来不应该这么不解风情

终于...

我找到了这个样式——table-layout，默认的是auto，如果我们把这个属性设置为fixed，那我们就可以随心所欲的改变单元格的宽度了，也可以实现单元格内的换行了（white-space: normal;）

<table border="1" cellspacing="0" cellpadding="0" width="100%" style="table-layout:fixed;">
    <thead>
        <tr>
            <th width="100px">123</th>
            <th>456</th>
            <th>789</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td width="100px" style="white-space:normal;word-break: break-all;">asdakdjahdjkadasdakdjahdjkad</td>
            <td>adadadd</td>
            <td>asda</td>
        </tr>
    </tbody>
</table>

在这里插入图片描述