table表格自适应1.当学玩基础的html，css后，在逛wordpress主题的时候发现很多主题介绍，都是写的基于b

前言

1 .当学玩基础的html，css后，在逛wordpress主题的时候发现很多主题介绍，都是写的基于bootstrap框架开发，百度一下bootstrap框架，发现是一款前端框架，当时就去bootstrap中文网查看了一下，bootstrap栅格布局吸引了我，然后使用bootstrap框架+自己写媒体查询写了很多响应式界面

如果引用了bootstrap框架，html table表格引用一下bootstrap文档中提供的table类，三二下自适应的表格就OK了，在一次写一个账号密码记录界面的时候，需要用到table表格，当时的登录注册都是手写的，没用任何框架，然后就开始折腾table表格自适应

注意

部分CSS已注释

演示图

code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table自适应表格</title>
    <style>
        body {
            filter: invert(1) hue-rotate(270deg);
        }
        table {
            width: 100%;
            text-align: center;
            border-spacing: 0;/**设置相邻单元格的边框间的距离**/
            border-collapse: collapse;/**边框会合并为一个单一的边框**/
            color:#5a5a5a;
            table-layout: fixed;/**固定table表格**/
        }
        table  thead {
            background-color: #d9edf7;
        }
        table td,table th{
            border:1px solid #ccc;
            overflow: hidden;/**溢出隐藏**/
            white-space: nowrap;/**不换行**/
            text-overflow: ellipsis;/**溢出不可见部分使用...代替**/


        }
    </style>
</head>
<body>
    <table>
        <caption>我是表格标题</caption>
        <!--表头-->
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>出生年月</th>
            </tr>
        </thead>
        <!--表内容-->
        <tbody>
            <tr>
                <td>久伴</td>
                <td>24</td>
                <td>男</td>
                <td>1996年8月22日</td>
            </tr>
        </tbody>
    </table>
</body>
</html>