表格布局

表格的基本结构

<table>
    <caption>标题</caption>
    <thead>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="" colspan=""></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot></tfoot>
</tbale>
复制代码

也可以根据display属性来定义表格中的元素 display:table/table-cell /table-row

表格中基本属性

• border-collapse:collapse/separate 边框重叠，合并边框 去除表格间隙
• visibility:collapse 折叠 只有这个值可以显示，hidden不显示
• caption-side:top/bottom 标题在表格的上下方
• 合并边框的优先级，留下一个边框，先看边框的属性的值border-style：hidden>none,前者一样看样式宽比窄，double>solid>dashed,最后看td>tr>tbody>col>colgroup。
• 宽度table-layout：auto/fixed，浏览器算和自己设置的值。

表格布局九宫格：hover

注意：去除表格空隙，和padding，表格td中的边框会合并，但是hover的时候需要把之前的border为inset。 别的方法写这个的时候：可以用box-shadow扩散半径来写，也可以通过每个li的margin-bottom/ringt：-5px；来让每一个都达到hover为5px的效果

转载于:https://juejin.im/post/5bfbe3346fb9a049e5534ee1