一、表格开始只设置 边框、宽高 的时候,效果如下图。
1、table → display:table;
2、 tr → display:table-row;(元素作为表格显示)
3、th、td → display:table-cell; (元素作为表格单元格显示)
vertical-align :inherit; (垂直对齐方式:居中显示)
其中 th 设置的字体会加粗、居中显示(一般用在第一行或第一列)。
二、表格设置想要样式
1、将表格之间、表格与单元格之间的间隙去除
border-spacing:0;
2、表格设置合并边框
border-collapse: separate(边框独立,默认值) | inherit (继承父级)| collapse(相邻边框合并)
3、合并行 rowspan
注:合并几行rowspan等于几(包括自己这一行),并且要把被合并的行去掉
4、合并列 colspan
注:合并几行colspan等于几(包括自己这一列),并且要把被合并的列去掉
三、整体html代码如下