CSS_控制表格样式

CSS 表格属性可以极大的改善表格的外观，如表格边框、高度与宽度等。

属性	描述
border	表格边框
border-collapse	折叠边框
width	表格的宽度
height	表格的高度
text-align	表格文本对齐
padding	表格内边距
Border-radius	边框变圆形

Table如下：

编号	姓名	年龄	性别	婚否
001	张三	18	女	已婚
002	李四	40	男	未婚
003	王五	38	女	已婚
004	赵六	23	男	未婚

l Width

样式如下：

.tab{width:600px;}

 

l border边框

Border为每一个小格子添加边框。

.tab tr td{border:1px solid #F03;}

 

l border-collapse折叠边框

border-collapse可以将相邻的边框合并到一起：

.tab{

width:600px;

border-collapse:collapse;

}

 

l 文字居中

并设置行高：

.tab tr td{

border:1px solid #F03;

text-align:center;

line-height:30px;

}

 

l 表格居中

整个表格放到屏幕的中间（左右居中，离上面100px）：

.tab{

width:600px;

border-collapse:collapse;

margin:100px auto;

}

 

 

l 背景色

为表头添加背景色，表头加粗：

.tab thead tr td{

Background-color:#9CF;

font-weight:bold;

}

 

l 行选中

  对tbody中的tr加样式，光标所在行换个背景色：

.tab tbody tr:hover{

background-color:#0FC;

}

 

l 某一格选中

给tbody下的tr td加样式，即对某一具体的格子加样式：

.tab tbody tr td:hover{

background-color:#7478BE;

}

 

l 颜色渐变

linear-gradient(90deg,#141414,#999);