表格的CSS样式有哪些-前端问答-PHP中文网

表格的CSS样式有哪些

青灯夜游

发布： 2022-07-27 19:41:33

原创

4776 人浏览过

CSS表格样式：1、border-collapse样式，可设置表格的边框是否被合并为一个单一的边框；2、border-spacing样式，指定分隔边框模型中单元格边界之间的距离；3、caption-side样式，设置表格标题的位置；4、empty-cells样式，规定是否显示表格中的空单元格上的边框和背景；5、table-layout样式，设置完成表布局时所用的布局算法。

表格的CSS样式有哪些

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

使用 CSS 可以使 HTML 表格更美观。

表格的CSS样式属性

属性	说明	CSS
border-collapse	规定是否合并表格边框	2
border-spacing	规定相邻单元格边框之间的距离	2
caption-side	规定表格标题的位置	2
empty-cells	规定是否显示表格中的空单元格上的边框和背景	2
table-layout	设置用于表格的布局算法	2

1、border-collapse属性

border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是像在标准的 HTML 中那样分开显示。

值	说明
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性
inherit	规定应该从父元素继承 border-collapse 属性的值

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			table,
			td,
			th {
				border: 1px solid black;
			}
			.box  {
				border-collapse: collapse;
			}
		</style>
	</head>
	<body>

		<table>
			<tr>
				<th>Firstname</th>
				<th>Lastname</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>Griffin</td>
			</tr>
			<tr>
				<td>Lois</td>
				<td>Griffin</td>
			</tr>
		</table><br><br>
		<table class="box">
			<tr>
				<th>Firstname</th>
				<th>Lastname</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>Griffin</td>
			</tr>
			<tr>
				<td>Lois</td>
				<td>Griffin</td>
			</tr>
		</table>
	</body>
</html>

登录后复制

2、border-spacing 属性

（1）作用：该属性指定分隔边框模型中单元格边界之间的距离。除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承。

（2）可能的值：

值

描述

length length

规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。

如果定义一个length参数，那么定义的是水平和垂直间距。

如果定义两个length参数，那么第一个设置水平间距，而第二个设置垂直间距。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			table,
			td,
			th {
				border: 1px solid black;
			}
			.box  {
				border-collapse:separate;
				border-spacing:10px 50px;

			}
		</style>
	</head>
	<body>

		<table>
			<tr>
				<th>Firstname</th>
				<th>Lastname</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>Griffin</td>
			</tr>
			<tr>
				<td>Lois</td>
				<td>Griffin</td>
			</tr>
		</table><br><br>
		<table class="box">
			<tr>
				<th>Firstname</th>
				<th>Lastname</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>Griffin</td>
			</tr>
			<tr>
				<td>Lois</td>
				<td>Griffin</td>
			</tr>
		</table>
	</body>
</html>

登录后复制