table表头不换行并允许横向滚动

最新推荐文章于 2025-03-13 10:13:35 发布

changuncle

最新推荐文章于 2025-03-13 10:13:35 发布

阅读量5k

点赞数 3

分类专栏：前端内容文章标签： html nowrap

本文链接：https://blog.csdn.net/xiaouncle/article/details/79297676

版权

前端内容专栏收录该内容

9 篇文章

订阅专栏

本文介绍两种在HTML表格中实现滚动条的方法：一种是始终保持滚动条可见，并阻止内容自动换行；另一种则是初始状态下隐藏滚动条，仅在鼠标悬停时显示。

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

一、滚动条一直显示

在< td>中加入nowrap=”nowrap”即可实现内容不换行的效果；滚动条效果需要通过设置overflow来实现。

<div id="test" style="width: 800px; height: 80px; overflow-x: auto;overflow-y: hidden">
    <table>
        <tr>
            <th nowrap="nowrap" style="padding-left:10px;padding-right:30px;">车辆的呼号</th>
            <th nowrap="nowrap" style="padding-right:10px;">值班中队长</th>
            <th nowrap="nowrap" style="padding-right:10px;">白天值班的老哥</th>
            <th nowrap="nowrap" style="padding-right:10px;">晚上值班的老哥</th>
            <th nowrap="nowrap" style="padding-right:30px;">排班时间</th>
            <th nowrap="nowrap" style="padding-right:10px;">状态</th>
            <th nowrap="nowrap" style="padding-right:30px;">车辆的呼号</th>
            <th nowrap="nowrap" style="padding-right:10px;">值班中队长</th>
            <th nowrap="nowrap" style="padding-right:10px;">白天值班的老哥</th>
            <th nowrap="nowrap" style="padding-right:10px;">晚上值班的老哥</th>
            <th nowrap="nowrap" style="padding-right:30px;">排班时间</th>
            <th nowrap="nowrap" style="padding-right:10px;">状态</th>
        </tr>
        <tr>
            <td style="padding-left:10px;">item.callsign</td>
            <td> item.dutyoffice </td>
            <td> item.daylaoge </td>
            <td> item.nightlaoge </td>
            <td> item.date </td>
            <td> item.status </td>
            <td> item.callsign </td>
            <td> item.dutyoffice </td>
            <td> item.daylaoge </td>
            <td> item.nightlaoge </td>
            <td> item.date </td>
            <td> item.status </td>
        </tr>
    </table>;
</div>

对< td>设置padding属性时，根据不同的框架和浏览器，padding有时会不起效果，对于这种情况我们可以在< td>中加个< div>标签，代码如下：

<td><div style='display:inline-block;width:10px'></div> item.dutyDate </td>

二、滚动条先隐藏鼠标移过才显示

有时候为了美观，要先把滚动条隐藏起来，等鼠标移到元素上之后再显示滚动条，鼠标离开滚动条就恢复隐藏状态。

<script type="text/javascript">
    $(document).ready(function(){
        $("#dutyControl").hover(function () {
            //$("#dutyControl").css("overflow-x", "auto");
            $("#dutyControl").css("overflow", "auto");
        }, function () {
            //$("#dutyControl").css("overflow-x", "hidden");
            $("#dutyControl").css("overflow", "hidden");
        });
    });
</script>
<div id="dutyControl" style="width: 800px; height: 80px; overflow-x: hidden;overflow-y: hidden">
    <table>
        <tr>
            <th nowrap="nowrap" style="padding-left:10px;padding-right:30px;">车辆的呼号</th>
            <th nowrap="nowrap" style="padding-right:10px;">值班中队长</th>
            <th nowrap="nowrap" style="padding-right:10px;">白班的辅警</th>
            <th nowrap="nowrap" style="padding-right:10px;">夜班的辅警</th>
            <th nowrap="nowrap" style="padding-right:30px;">排班时间</th>
            <th nowrap="nowrap" style="padding-right:10px;">状态</th>
            <th nowrap="nowrap" style="padding-right:30px;">车辆的呼号</th>
            <th nowrap="nowrap" style="padding-right:10px;">值班中队长</th>
            <th nowrap="nowrap" style="padding-right:10px;">白班的辅警</th>
            <th nowrap="nowrap" style="padding-right:10px;">夜班的辅警</th>
            <th nowrap="nowrap" style="padding-right:30px;">排班时间</th>
            <th nowrap="nowrap" style="padding-right:10px;">状态</th>
        </tr>
        <tr>
            <td style="padding-left:10px;">item.callsign</td>
            <td> item.dutyoffice </td>
            <td> item.daystaff </td>
            <td> item.nightstaff </td>
            <td> item.date </td>
            <td> item.status </td>
            <td> item.callsign </td>
            <td> item.dutyoffice </td>
            <td> item.daystaff </td>
            <td> item.nightstaff </td>
            <td> item.date </td>
            <td> item.status </td>
        </tr>
    </table>
</div>