html table表格设置滚动条

最新推荐文章于 2023-07-04 08:29:35 发布

西凉的悲伤

最新推荐文章于 2023-07-04 08:29:35 发布

阅读量2.4w

点赞数 8

分类专栏：前端文章标签： html table html table table滚动条 table tbody滚动条

本文链接：https://blog.csdn.net/qq_33697094/article/details/119887896

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

table对tbody进行设置使其能够进行滚动。

示例一：

效果如下：
在这里插入图片描述
代码如下：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>表格滚动</title>
    <style>
        table,tbody {
            display: block;
            height: 195px;
            border: 0;
            border-spacing: 0;
            border-collapse: collapse;
            cursor: default;
        }

        tbody {
            overflow-y: scroll;
        }

        table thead,
        tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }

        table thead {
            width: calc(100% - 1em)
        }

        table thead th {
            background: #84acde;
            width: 20%;
        }

        table tbody td {
            width: 20%;
            text-align: center;
        }
    </style>
</head>

<body>
    <table  border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>出生年月</th>
                <th>手机号码</th>
                <th>单位</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>19</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>20</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>腾讯科技</td>
            </tr>
            <tr>
                <td>赵新</td>
                <td>17</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>腾讯科技</td>
            </tr>
            <tr>
                <td>周明</td>
                <td>22</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>杨洋</td>
                <td>19</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>刘艳</td>
                <td>17</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>王福</td>
                <td>31</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张贵</td>
                <td>32</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>吴斌</td>
                <td>25</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

示例二

效果如下：
在这里插入图片描述

代码如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ξӗθCSSތԌ</title>
<style>
table tbody {
    display:block;
    height:195px;
    overflow-y:scroll;
}

table thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}

table thead {
    width: calc( 100% - 1em )
}
table thead th{ background:#ccc;}
</style>
</head>

<body>
<table width="80%" border="1">
<thead>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>111</td>
    <td>222</td>
    <td>333</td>
    <td>444</td>
    <td>555</td>
  </tr>
  <tr>
    <td>111</td>
    <td>222</td>
    <td>333</td>
    <td>444</td>
    <td>555</td>
  </tr>
  <tr>
    <td>111</td>
    <td>222</td>
    <td>333</td>
    <td>444</td>
    <td>555</td>
  </tr>
  <tr>
    <td>111</td>
    <td>222</td>
    <td>333</td>
    <td>444</td>
    <td>555</td>
  </tr>
  <tr>
    <td>111</td>
    <td>222</td>
    <td>333</td>
    <td>444</td>
    <td>555</td>
  </tr>
  <tr>
    <td>111</td>
    <td>222</td>
    <td>333</td>
    <td>444</td>
    <td>555</td>
  </tr><tr>
    <td>111</td>
    <td>222</td>
    <td>333</td>
    <td>444</td>
    <td>555</td>
  </tr>
  <tr>
    <td>111</td>
    <td>222</td>
    <td>333</td>
    <td>444</td>
    <td>555</td>
  </tr>
  <tr>
    <td>111</td>
    <td>222</td>
    <td>333</td>
    <td>444</td>
    <td>555</td>
  </tr>
  <tr>
    <td>111</td>
    <td>222</td>
    <td>333</td>
    <td>444</td>
    <td>555</td>
  </tr><tr>
    <td>111</td>
    <td>222</td>
    <td>333</td>
    <td>444</td>
    <td>555</td>
  </tr>
  <tr>
    <td>111</td>
    <td>222</td>
    <td>333</td>
    <td>444</td>
    <td>555</td>
  </tr>
  <tr>
    <td>111</td>
    <td>222</td>
    <td>333</td>
    <td>444</td>
    <td>555</td>
  </tr>
  <tr>
    <td>111</td>
    <td>222</td>
    <td>333</td>
    <td>444</td>
    <td>555</td>
  </tr>

</tbody>
</table>
</body>
</html>