如何使用 css 而不是数据表插件向数据表添加水平滚动条？

Posted 2023-05-09

【中文标题】如何使用 css 而不是数据表插件向数据表添加水平滚动条？

【英文标题】：How to add horizontal scrollbar to datatable using css instead of datatable plugin?

【发布时间】：2018-11-29 01:33:45

【问题描述】：

我的数据表宽度有问题，以允许溢出-x 可滚动。我想固定列宽，不允许调整宽度，如果超过宽度，显示滚动条。

<table id="example" class="table table-striped table-bordered nowrap display" style="width:100%;table-layout:fixed;">
    <thead>
        <tr>
            <th style="width:30%;">Name</th>
            <th style="width:30%;">Position</th>
            <th style="width:30%;">Office</th>
            <th style="width:30%;">Age</th>
            <th style="width:30%;">Start date</th>
            <th style="width:30%;">Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>       
</table>

我希望表格以固定宽度显示为每列而不自动调整。添加水平滚动条以允许内容在不改变其宽度的情况下滚动。

在数据表中设置 scrollX 为 true 会影响标题对齐，所以我没有使用它。我可以使用 css 制作它的任何解决方案吗？

【问题讨论】：

这可能会有所帮助：css-tricks.com/fixing-tables-long-strings

【参考方案1】：

尝试将 '%' 更改为 'px'。

例如：width:100px;