表头固定，随内容可水平拖动的超简单实现

最新推荐文章于 2023-01-04 00:59:15 发布

up阳光正好

最新推荐文章于 2023-01-04 00:59:15 发布

阅读量4.2k

点赞数

分类专栏：前端 CSS 文章标签： css

本文链接：https://blog.csdn.net/zjuwwj/article/details/78915487

版权

前端同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

1. 设计思路

两个table实现，有三个div，最外侧一个，控制全局，一个控制表头，一个控制表身。

2. 注意事项

最外侧的div，需要用overflow-x来控制最横向滚动，因为overflow-x、y在IE中存在兼容性问题，当overflow-x/overflow-y其中之一被设置成’scroll’、’auto’、’hidden’时，另一个还是’visible’，不会被设置为’auto’ 所以，最好使用 “overflow-x:scroll; overflow-y:auto”,这时候，右边的在需要时才会显示。如果希望右边的滚动条一直不显示，那么，可以使用：”overflow-x:scroll; overflow-y:hidden;”
表头和表体的各列需要对齐，所以可以用table-layout:fixed;来固定宽度
当用table-layout:fixed;固定了列宽度，也就会有长的内容会显示不全，那么可以用white-space:normal;来进行换行

对应的css如下：

.table-box {
    height: 486px;
    width: 570px;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    table-layout: fixed;
}

.fixed-head {
    position: absolute;
    left: 0;
    right: 6px;
}

.auto-body {
    position: absolute;
    height: 450px;
    overflow-y: auto;
    overflow-x: hidden;
    top: 36px;
    left: 0;
}

.modal-body .table-preview th, .modal-body .table-preview td {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

对应的html如下：

<div class="modal-body" style="overflow:auto;text-align: center;max-height: 520px">
    <div class="table-box">
      <div class="fixed-head">
        <table class="table table-striped table-preview" style="table-layout: fixed;margin-bottom: -2px;">
          <thead>
          <tr>
            <th>头部</th>
          </tr>
          </thead>
        </table>
      </div>
      <div class="auto-body">
        <table class="table table-striped table-preview" style="table-layout: fixed;">
          <tbody>
          <tr>
            <td>内容</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
</div>

不换行处理，超过宽度用…显示，对应的css如下：

.modal-body .table-preview th, .modal-body .table-preview td {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

3. 完整代码如下

本实例是基于bootstrap的：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>Document</title>
    <style>
        .table-box {
            height: 486px;
            width: 570px;
            position: relative;
            overflow-x: auto;
            overflow-y: hidden;
            table-layout: fixed;
        }

        .fixed-head {
            position: absolute;
            left: 0;
        }

        .auto-body {
            position: absolute;
            height: 450px;
            overflow-y: auto;
            overflow-x: hidden;
            top: 36px;
            left: 0;
        }

        .modal-body .table-preview th, .modal-body .table-preview td {
            width: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="modal-body" style="overflow:auto;text-align: center;max-height: 520px">
    <div class="table-box">
        <div class="fixed-head">
            <table class="table table-striped table-preview" style="table-layout: fixed;margin-bottom: -2px;">
                <thead>
                <tr>
                    <th>很长的头部真的很长头部1</th>
                    <th>头部2</th>
                    <th>头部3</th>
                    <th>头部4</th>
                    <th>头部5</th>
                    <th>头部6</th>
                    <th>头部7</th>
                </tr>
                </thead>
            </table>
        </div>
        <div class="auto-body">
            <table class="table table-striped table-preview" style="table-layout: fixed;">
                <tbody>
                <tr>
                    <td>很长的头部真的很长内容1</td>
                    <td>内容2</td>
                    <td>内容3</td>
                    <td>内容4</td>
                    <td>内容5</td>
                    <td>内容6</td>
                    <td>内容7</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>

up阳光正好

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
表头固定，随内容可水平拖动的超简单实现

1. 设计思路两个table实现，有三个div，最外侧一个，控制全局，一个控制表头，一个控制表身。 2. 注意事项最外侧的div，需要用overflow-x来控制最横向滚动，因为overflow-x、y在IE中存在兼容性问题，当overflow-x/overflow-y其中之一被设置成’scroll’、’auto’、’hidden’时，另一个还是’visible’，不会被设置为
复制链接

扫一扫