table表头固定，内容滚动

最新推荐文章于 2024-04-01 18:32:05 发布

看陌生的风景

最新推荐文章于 2024-04-01 18:32:05 发布

阅读量372

点赞数

分类专栏： CSS HTML 文章标签： html css

本文链接：https://blog.csdn.net/Richardjgp/article/details/106257154

版权

CSS 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

HTML

19 篇文章 0 订阅

订阅专栏

更改：width: calc(100% - 1em) em的值

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>a</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>

看陌生的风景

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
table表头固定，内容滚动

<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>a</title> <style> table tbody { display: block; height: 195px; overflow-y: scro.
复制链接

扫一扫

专栏目录