H5 table表格案例、边距 解析（表格带有滚动条）

一个简单的表格： table设置表格有滚动条

table表头固定并添加滚动条_Muscleheng的博客-CSDN博客_table添加滚动条固定表头

代码中给table元素中 table thead,tbody tr添加 table-layout: fixed; 或者给td添加 word-break: break-all ，都可以达到表格安装我们设置的宽度

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

<style>
            * {
                margin: 0;
                padding: 0;
            }
            table {
                /*设置相邻单元格的边框间的距离*/
                border-spacing: 0;
                /*表格设置合并边框模型*/
                border-collapse: collapse;
                text-align: center;
            }
            /*关键设置 tbody出现滚动条*/
            table tbody {
                display: block;
                height: 80px;
                overflow-y: scroll;
                overflow-x: hidden;
            }

            table thead,
            tbody tr {
                display: table;
                width: 100%;
                table-layout: fixed;
            }
            /*关键设置：滚动条默认宽度是16px 将thead的宽度减16px*/
            table thead {
                width: calc( 100% - 1.1em)
            }
            table thead th {
                background: #ccc;
            }

        </style>
<table id="tab1" width="100%" cellspacing="0" border="1px">
 <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>
            </tbody>
  </table>

tr代表行 td就是列 colspan="4"（4个） cellspacing="0"消除双层边距放在table里面
是一个样式style：border-collapse:collapse;用来消除单元格间距、等于cellspacing="0"


rowspan=xx (合并xx行，同时需要把下一行删除xx个<td></td>标签 ，如果不删处表格就会被变形)
colspan=xx (合并xx列，同时需要把本行删除xx个<td></td>标签 ，同样不删除表格就会变形)

colspan是横向合并；rowspan是纵向合并。
cellspacing="0" cellpadding="0"为html中为table定义的属性,在CSS中没有.
cellpadding 对应 padding
cellspacing 对应 margin

<td style="border-right:none;">aaa</td> <!-- 无右边框 -->
<td style="border-left:none;">bbb</td> <!-- 无左边框 -->

语法：<table summary="表格简介文本">
 <caption>标题文本</caption>加载<tr><td>上方
表格内边框的高度取决于；tr的高度，也可以设置td的高度。