您的位置：首页 > Web前端 > CSS

（11）CSS控制表格样式

2014-04-25 14:35 537 查看

之前我们已经学习了一些可以应用于<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"没有生效，不知道为什么。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航