解决使用bootstrap时列宽不一致且，显示数据内容过长时自动换行导致的页面不美观问题

最新推荐文章于 2026-03-25 01:20:27 发布

原创最新推荐文章于 2026-03-25 01:20:27 发布 · 1.2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#bootstrap

收录于

本文介绍了如何使用Bootstrap实现表格内容自适应宽度，并保持内容不换行。关键在于为表格添加`table-responsive`类和`text-nowrap`类。`table-responsive`类确保表格在屏幕较小设备上滚动，而`text-nowrap`类防止表格单元格内的文字换行。同时，强调了`thead`和`tbody`标签的必要性，以确保Bootstrap样式正确应用。

bootstrap table 怎么自适应宽度

<div class="table-responsive">
    <table class="table text-nowrap">
        <thead>
            <tr>
                <th> ... </th>
                ....
            </tr>
        </thead>
        <tbody>
            <tr>
                <td> ... </td>
                ....
            </tr>
            .....
        </tbody>
    </table>
</div>