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 对象就会被创建，Table对象中封装了可以对单元格、行进行直接操纵的API，不用每次都获取标签元素了。

二、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:; /*设置相邻单元格的边框间的距离（仅用于“边框分离”模式）*/
　　/*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