原生table:表格table中thead固定，tbody超出高度出现滚动条

首先认识一下表格的table-layout属性tableLayout 属性用来显示表格单元格、行、列的算法规则。tableLayout有如下三个值：autofixedinherit值描述auto默认。列（td，th）宽度由单元格内容设定。(1) 给td指定的width不一定生效，td的width会自动调整(2) text-overflo...

23456人浏览 · 2019-05-16 09:42:22

· 2019-05-16 09:42:22 发布

首先认识一下表格的table-layout属性

tableLayout 属性用来显示表格单元格、行、列的算法规则。

tableLayout有如下三个值：auto fixed inherit

值描述

auto

值	描述
auto	默认。列（td，th）宽度由单元格内容设定。 (1) 给`td`指定的`width`不一定生效，`td`的`width`会自动调整 `(2) text-overflow: ellipsis`也会失效，同样，`img`会撑大`td`
fixed	列宽由表格宽度和列宽度设定。 (1) 给`td`指定的`width会生效` `(2) text-overflow: ellipsis会生效`
inherit	规定应该从父元素继承 table-layout 属性的值。

默认。列（td，th）宽度由单元格内容设定。

(1) 给td指定的width不一定生效，td的width会自动调整

(2) text-overflow: ellipsis也会失效，同样，img会撑大td

fixed

列宽由表格宽度和列宽度设定。

(1) 给td指定的width会生效

(2) text-overflow: ellipsis会生效

inherit 规定应该从父元素继承 table-layout 属性的值。

注意：

td的text-overflow : ellipsis和overflow : hidden都会起作用，但是这里也有几个地方要注意：
text-overflow : ellipsis生效的前提是
- overflow不为visible，最好是类似hidden的值
- 需要指定table的width
如果td的宽度加起来超过table的width，即使给table加上overflow:hidden，td也不会被隐藏。

表格table中thead固定，tbody超出高度出现滚动条，css可进行如下设置

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;
}

例子如下

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>表格table种tbody超出高度加滚动条</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>姓名</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>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴与四十大盗</td>
            </tr>
            <tr>
                <td>张小三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>腾讯科技</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>浏阳河就业</td>
            </tr>
            <tr>
                <td>张三疯子</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张大三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三五</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张刘三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport