table表格高级用法（一）

2023-09-13 18:43| 来源: 网络整理| 查看: 265

一、细线表格

border-collapse: collapse;相邻单元格边框合并

细线表格 *{ margin: 0; padding: 0; } table{ width: 300px; height: 200px; margin: 0 auto; border-collapse: collapse; } td{ border: 1px solid blue; }

二、粗框细表格

border: 1px solid #008000;

三、双线表格

border: 4px double #008000;

四、宫字格

1、单元格间距语法：border-spacing:value; 说明：单元格间距（该属性必须给table添加）表示单元格边框之间的距离，不可取负值

五、单线表格

设置td为：border-bottom: 1px solid blue;

*{ margin: 0; padding: 0; } table{ width: 300px; height: 200px; margin: 0 auto; } td{ border-bottom: 1px solid blue; }

六、日历表格

2、empty-cells：show/hidden 当单元格没有任何内容的时候是否显示该区域

细线表格 *{ margin: 0; padding: 0; } table{ width: 300px; height: 200px; margin: 100px auto; border-spacing: 2px; border: 3px solid red; padding: 10px; } td{ background: blue; empty-cells: hide; }

表格默认宽度，根据内容量分配宽度。

七、表格宽度（默认auto）

3、table-laypout:auto/fixed auto:自动分配内容 fixed：固定宽度显示内容，表格宽度不受内容影响

【本文地址】

table表格高级用法（一）

table表格高级用法（一）

今日新闻

推荐新闻