（11）CSS控制表格样式

最新推荐文章于 2022-02-18 16:38:11 发布

mxd_xyz

最新推荐文章于 2022-02-18 16:38:11 发布

阅读量547

点赞数

分类专栏： CSS学习笔记

本文链接：https://blog.csdn.net/mxd395/article/details/24466157

版权

CSS学习笔记专栏收录该内容

17 篇文章 1 订阅

订阅专栏

之前我们已经学习了一些可以应用于<table>,<td>,<tr>,<th>的一些属性，比如：border（设置表格边框属性）、padding（设置单元格边框与单元格内容的间距）、width和height（用于设置单元格的宽度与高度）、background-color和background-image（设置单元格背景）等属性，本文介绍一些只能用于表格的CSS属性。

（1）border-collapse：指示当两个单元格接触时，两个边框应同时显示还是应显示其中一个。

border-collapse="collapse"水平边框折叠，垂直边框互相邻接；border-collapse="separate"单独显示每个边框。

CSS测试代码如下：

td.a {
	border: red solid thin; 
	width: 100px;
}
td.b {
	border: red dotted thin; 
	width: 100px;
}
table.one { border-collapse: collapse; }
talbe.two { border-collapse: separate; }

HTML测试代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />  
		<base href="/testsmarty/templates/"></base>
		<title>CSS控制列表样式</title>
		<link rel="stylesheet" type="text/css" href="test.css">
	</head>
	
	<body>
		<table class="one">
			<caption>使用collapse</caption>
			<tr>
				<td class="a">one</td>
				<td class="b">two</td>
			</tr>
			<tr>
				<td class="b">three</td>
				<td class="a">four</td>
			</tr>
		</table>
		<br/>
		<table class="two">
			<caption>使用separate</caption>
			<tr>
				<td class="a">one</td>
				<td class="b">two</td>
			</tr>
			<tr>
				<td class="b">three</td>
				<td class="a">four</td>
			</tr>
		</table>		
	</body>
</html>

可以看到，在使用了border-collapse: collapse后，红色实线覆盖了红色点线边框，对于使用border-collapse: separate的情况，我们可以使用border-spacing和empty-cells属性。

（2）border-spacing：指定相邻单元格边框间的距离。

例如“border-spacing：2px 4px”表示水平间隔2px，垂直间隔4px。若该属性的值只给出了一个长度值，则表示水平间距与垂直间距都使用这个值。

（3）empty-cells：指示单元格没有任何内容时是否显示边框。

取值如下：1. show（默认值），即使为空也显示边框；2. hide，若单元格为空则隐藏边框；3. inherit用于嵌套表格的继承。

（4）caption-side：指示标题<caption>应该位于表格的哪个侧边。

取值如下：1. top（默认值），表格上方；2. right，表格右方；3. bottom，表格下方；4. left，表格左方。

效果图如下：

CSS代码如下：

td.a {
	border: red solid thin; 
	width: 200px;
}
td.b {
	border: red dotted thin; 
	width: 200px;
}
table.one { 
	border-collapse: separate;
}
table.two { 
	caption-side: bottom;
	border-collapse: separate; 
	border-spacing: 5px 10px;
	empty-cells: hide;
}

HTML代码如下;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />  
		<base href="/testsmarty/templates/"></base>
		<title>CSS控制列表样式</title>
		<link rel="stylesheet" type="text/css" href="test2.css">
	</head>
	
	<body>
		<table class="one">
			<caption class="c1">使用separate</caption>
			<tr>
				<td class="a">one</td>
				<td class="b">two</td>
			</tr>
			<tr>
				<td class="b">three</td>
				<td class="a"></td>
			</tr>
		</table>
		<br/>
		<table class="two">
			<caption class="c2">使用border-spacing,empty-cells和caption-side</caption>
			<tr>
				<td class="a">one</td>
				<td class="b">two</td>
			</tr>
			<tr>
				<td class="b">three</td>
				<td class="a"></td>
			</tr>
		</table>		
	</body>
</html>

（5）table-layout

当为单元格指定了宽度之后，但所包含的内容有超出了指定的空间，浏览器会为单元格提供更多的控件以适应内容。通过table-layout可以强制浏览器使用指定宽度（即使造成有些内容无法阅读）。

取值如下：1. auto（默认值），浏览器查看表格中每个单元格，找出其中宽度最大并不能拆分的内容，这会降低表格的呈现速度。2. fixed，表格宽度使用设置的值（速度快）。3. inherit嵌套表格的上层设置。

对于字母移除的情况，可以使用overflow属性。

疑问：实验时caption-side="left"没有生效，不知道为什么。