CSS(九) 设置表格样式
2017-10-07 20:03
302 查看
设置表格的边框
Border:设置表格边框;Border-collapse:设置边框分离或者合并,默认是separate(分离)的,值collapse 为合并;
Border-spacing :设置单元格的间距;
Padding:设置单元格内容和边框之间的距离;
设置表格的宽度
Table-layout默认auto 自动方式,根据单元格的内容自动调整宽度;
Fixed 固定方式表格宽度固定;
.t{ border: 1px gray solid; border-spacing: 0px; border-collapse: collapse; width: 500px; table-layout: fixed; }
设置表格隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置表格隔行换色</title>
<style type="text/css">
.t{ border: 1px gray solid; border-spacing: 0px; border-collapse: collapse; width: 500px; table-layout: fixed; }
.t tr{
background-color: #CCC;
}
.t td{
border: 1px gray solid;
padding: 5px;
}
.t th{
border: 1px gray solid;
padding: 5px;
}
tbody tr.even{
background-color: #AAA;
}
</style>
</head>
<body>
<table class="t">
<caption>学生信息</caption>
<thead>
<tr>
<th>序号</th>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>出生日期</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>001</td>
<td>a</td>
<td>男</td>
<td>2012-12-12</td>
</tr>
<tr class="even">
<th>2</th>
<td>002</td>
<td>b</td>
<td>女</td>
<td>2011-11-11</td>
</tr>
<tr>
<th>3</th>
<td>003</td>
<td>c</td>
<td>女</td>
<td>2010-10-10</td>
</tr>
<tr class="even">
<th>4</th>
<td>004</td>
<td>d</td>
<td>女</td>
<td>2009-10-10</td>
</tr>
<tr>
<th>5</th>
<td>005</td>
<td>e</td>
<td>男</td>
<td>2008-01-01</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>总计</th>
<th colspan="4">5条数据</th>
</tr>
</tfoot>
</table>
</body>
</html>
设置表格列样式
th+td{ text-align: center; } th+td+td+td{ text-align: center; background-color: red; }
设置鼠标经过时行变色效果
tbody tr:HOVER { background-color: aqua; }
相关文章推荐
- CSS设置表格样式,样式表格
- css下设置表格样式
- 精通CSS.DIV网页样式与布局(五) ——设置表格与表单样式
- css实现设置表格hover样式
- [转]CSS如何设置html table表格边框样式
- CSS如何设置html table表格边框样式
- CSS如何设置html table表格边框样式
- jsp设置表格样式的css工具
- CSS:表格样式(设置表格边框/文字/背景的样式)
- 仿Word自动套用格式,用CSS设置表格样式
- css设置细线样式的表格
- CSS 设置表格,表格样式
- css应用表格排版td中的文本过长,设置不换行,随内容同行显示样式
- CSS如何设置html table表格边框样式
- CSS设置html table表格边框样式
- CSS样式设置(鼠标经过表格变色和控制表格隔行变色和添加CSS文件引用)
- CSS:表格样式(设置表格边框/文字/背景的样式)
- css 表格设置为细线样式
- CSS如何设置html table表格边框样式
- css设置表格样式的方法