### 表格制作
```css
1、table的常用属性
? ?1.1、cellspacing和cellspadding区别
?? ??? ?属性?? ?含义?? ?常用属性值
?? ??? ?cellspacing?? ?设置单元格与单元格边框之间的空白间距?? ?像素值(默认为2px)
?? ??? ?cellspadding?? ?设置单元格内容与单元格边框之间的空白距离?? ?像素值(默认为1px)
? ?1.2、table-layout
? ? ? ? fixed: 列宽由表格宽度和列宽度设定。
? ? ? ? auto: 默认。列宽度由单元格内容设定。
?? ??? ?inherit: ?规定应该从父元素继承 table-layout 属性的值。
2、固定行
? ?/* 固定行 */
? ?thead th {
? ??? ?background-color: antiquewhite;
? ??? ?position: sticky;
? ??? ?position: -webkit-sticky;
? ??? ?top: 0;
? ?}
? ?
? ?thead th:first-child {
? ??? ?z-index: 20;
? ?}
3、固定列
? ?/**固定首列**/
? ?th:first-child , td:first-child {
? ??? ?position: sticky; /* 首列使用粘性属性，固定到原位置 */
? ??? ?position: -webkit-sticky;
? ??? ?left: 0; /* 使用sticky时需要配置定位标识 */
? ??? ?background-color: bisque;
? ??? ?z-index: 10; /* 在滑动时，后面的内容会覆盖掉前首列单元，需要设置z级别 */
? ?}
4、常见问题
? ?4.1、当外层div固定宽高后，对table每个单元格th和tb的width设置后，当行的单元格width的总和超过div的width时，此时单元格的width
? ? ? ? 无效，会出现自动平分每个单元格，具体原因是 table-layout默认auto,它是列宽根据内容自适应。
?? ??? ?解决方式：table上的table-layout属性修改成fixed，固定表格，对应的列宽将影响到整体表格宽高
?? ??? ?demo
?? ??? ?<div>
?? ??? ? ?<table>
?? ??? ? ? ? <thead>
?? ??? ??? ??? ?<tr><th></th><th></th><th></th><th></th></tr>
?? ??? ??? ? </thead>
?? ??? ??? ? <tbody>
?? ??? ??? ? ? ?<tr><td></td><td></td><td></td><td></td></tr>
?? ??? ??? ??? ?<tr><td></td><td></td><td></td><td></td></tr>
?? ??? ??? ??? ?<tr><td></td><td></td><td></td><td></td></tr>
?? ??? ??? ? </tbody>
?? ??? ? ?</table>
?? ??? ?</div>
?? ??? ?<style>
?? ??? ??? ?/**
?? ??? ??? ? * 最外层盒子处理
?? ??? ??? ? * 1、设置边框 考虑每列的边框是 右边、下边框，最外层盒子就进设置左边、上边框
?? ??? ??? ? * 2、固定宽高，当出现内容溢出时，自动显示滚动条
?? ??? ??? ? * 3、table标签中消除每个列格原生的占用空间，
?? ??? ??? ? * ? ?cellspacing="0" ?// 消除每个单元格的间距
?? ??? ??? ? * ? ?cellpadding="0" ?// 消除每个单元格的内间距
?? ??? ??? ?**/
?? ??? ??? ?.box {
?? ??? ??? ??? ?overflow: auto; /*table列超出宽度后，自动出现滚动条*/
?? ??? ??? ??? ?width: 300px;
?? ??? ??? ??? ?//height: 240px;
?? ??? ??? ??? ?border: 1px solid #DCDCDC;
?? ??? ??? ??? ?border-right: 0;
?? ??? ??? ??? ?border-bottom: 0;
?? ??? ??? ??? ?box-sizing: border-box;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?table {
?? ??? ??? ??? ?border-collapse: separate; /**处理边框重叠情况**/
?? ??? ??? ??? ?table-layout: fixed; /**固定表格,使单元格宽度可设置**/
?? ??? ??? ??? ?width: 100%;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ? ? ?th,td {
?? ??? ??? ??? ?width: 100px;
?? ??? ??? ??? ?height: 20px;
?? ??? ??? ??? ?border-right: 1px solid #DCDCDC;
?? ??? ??? ??? ?border-bottom: 1px solid #DCDCDC;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?/* 固定行 */
?? ??? ??? ?thead th {
?? ??? ??? ??? ?background-color: antiquewhite;
?? ??? ??? ??? ?position: sticky;
?? ??? ??? ??? ?position: -webkit-sticky;
?? ??? ??? ??? ?top: 0;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?thead th:first-child {
?? ??? ??? ??? ?z-index: 20;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?/**固定首列**/
?? ??? ??? ?th:first-child , td:first-child {
?? ??? ??? ??? ?position: sticky; /* 首列使用粘性属性，固定到原位置 */
?? ??? ??? ??? ?position: -webkit-sticky;
?? ??? ??? ??? ?left: 0; /* 使用sticky时需要配置定位标识 */
?? ??? ??? ??? ?background-color: bisque;
?? ??? ??? ??? ?z-index: 10; /* 在滑动时，后面的内容会覆盖掉前首列单元，需要设置z级别 */
?? ??? ??? ?}
?? ??? ?</style>
?? ??? ?
```
