table问题汇总
平时要使用 table 的次数说多不多，说少不少，但每次使用必定会被几个问题“坑”一下，所以这篇博客用来记录下table那些“小坑”。但 table 也会有很多好用的特性，比如内容自动垂直居中，正是因为这一点，垂直居中可以用 display: table-cell 和 vertical-align 实现，同时没有兼容性问题。看来 table 也”还不错”。
一、table自带特性
（一）当 table 宽度设置为定值时，td 的宽度会自动撑开，按内容长度分配各自宽度（高度同理）。即使给某个 td 设置了一定宽度，其它单元格依旧会自动分配宽度。（这一点跟flex很像）。
.container{ width: 500px; height: 120px; } .container table{ width: auto; }
.container{ width: 500px; height: 120px; } .container table{ width: 100%; }
（二）td 内的内容，不论文字、inline元素、还是block元素都会“垂直居中”。
<tr> <td><span>小红</span></td> <td>女</td> <td><div class="block"></div></td> </tr>
table .block{ display: block; width: 10px; height: 10px; background: green; }
想控制 td 内元素垂直方向上的居中方式，用 vertical-align 属性。但要注意一点是，vertical-align 是用来设置子元素相对于父元素的居中方式的，所以该属性要设置在父元素上，即 td 本身。（table 内的 td 默认 vertical-align：middle;）
table tr th,td{ vertical-align: top; }
（三）th 标签内的内容会自动垂直水平居中，并且字体加粗。
一般 th 是 thead 内的单元格，即表头信息。
（四）table 元素是块级元素，居中原理与块级元素相同。
不过要注意一点是，用 display：table-cell 方法对其他元素内的内容实现垂直居中时，元素不可以被 display：flex 的元素包裹，否则 vertical-align 会失效。
二、table 的边框问题
table 有个CSS属性 border-collapse，这个属性有两个基本值：separate（默认值）–边框分离，collapse — 边框合一。这两个属性稍后会提到，暂且先看看给table 中 的各个元素分别添加 border 是什么样。
table{ border: 1px solid black; } table tr{ border: 1px solid red; } table tr th,td{ border: 1px solid green; }
1) 边框分离 border-collapse: separate; 时
table{ border-collapse: separate; }
直接给 td 加 border，会让表格看起来有“双层边框”，是因为每个单元格之间有 cellspacing 和 border-spacing。
2) 边框合一 border-collapse: collapse; 时
table{ border-collapse: collapse; }
很明显，最后一种就是我们最需要的那种，但是在“边框分离”状态下，也可以实现类似的效果，就是边框“粗了点”。如需要，请参照第三种方法。
3) “边框分离”模式下模拟的“边框合一”
table{ border-collapse: separate; border: 1px solid black; border-spacing: 0; /*设置相邻单元格的边框间的距离（仅用于“边框分离”模式）*/
/*empty-cells:hide; /*不在空单元格周围绘制边框*/
} table td{ border: 1px solid green; }
这个原理就是让 td 的边框与 table 的边框之间的间距变为0，两个 border 挨在一起，看起来像一条 border 罢了。
三、table 的那些坑
- table高宽是靠内容撑开的 对margin不敏感 可用padding代替
- table自定义 width 失效时 对table使用 table-layout:fixed;
- table宽度不够，想要单元格内换行效果时，可在单元格内使用div/p标签包一层，给div/p标签设置定宽，或者div/p标签宽度100%后设置 word-break:break-all;
- table内的某一行单元格宽度和其他行不同时，可以在 tr 内嵌套 table实现
- table 中的单元格跨行、跨列（合并单元格）可以用 td 标签自带的属性：rowspan 和 colspan