CSS_控制表格样式

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

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

Table如下：

<table class="tab">

<thead>

<tr>

<td>编号</td>

<td>姓名</td>

<td>年龄</td>

<td>性别</td>

<td>婚否</td>

</tr>

</thead>

<tbody>

<tr>

<td>001</td>

<td>张三</td>

<td>18</td>

<td>女</td>

<td>已婚</td>

</tr>

<tr>

<td>002</td>

<td>李四</td>

<td>40</td>

<td>男</td>

<td>未婚</td>

</tr>

<tr>

<td>003</td>

<td>王五</td>

<td>38</td>

<td>女</td>

<td>已婚</td>

</tr>

<tr>

<td>004</td>

<td>赵六</td>

<td>23</td>

<td>男</td>

<td>未婚</td>

</tr>

</tbody>

</table>

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);