表格样式

beyes · 发表于 2015-12-25 11:45:19

table { table-layout:fixed }
看下面代码：

<table border="1">
<caption> 曲径通幽技术论坛 </caption>
<tr>
<td> [url]http://www.groad.net[/url] </td>
<td> 学习与分享 </td>
</tr>
</table>

复制代码

效果：

默认的表格，单元格会随着你里头输入的内容而相应增大以恰好容纳它们。

再修改一下网址那行 <td> ，将其改为 <td width=30> ，会发现并没有限制住，单元格还是能自适应的增大。

因此得出一个结论，在没有其它限制的情况下，为表格设置宽度没意义。

如果想限制表格宽度，那么需要使用上述的 table-layout:fixed 。修改代码如下：

<style type="text/css">
td {table-layout:fixed; }
</style>
<table border="1">
<caption> 曲径通幽技术论坛 </caption>
<tr>
<td width="260"> [url]http://www.groad.net[/url] </td>
<td> 学习与分享 </td>
</tr>
</table>

复制代码

这样，就对第 1 个单元格进行了限定，效果如下图：

上面的代码作为演示，实际上现在并不推荐直接在 <td> 标签里指定单元格宽度，而应该统一的放在 css 里去描述。

table-layout 可以作用在行，列，和单元格上。

caption-side 表格标题的设置

比如我可以将表格的标题放在表格的下边，此时可用该属性值来指定，如 caption-side:bottom ，如下图所示：

也可以定义在左右两边，但不同的浏览器对此的解析有所差异，这里就不逐一演示了。

border-collapse 控制表格的边框

这个样式已经在《单线表格的实现（border-collapse: collapse/separate）》里说明过，在此不赘述。

border-spacing 设定相邻单元格边框间的距离

查看下面代码：

<style type="text/css">
.t { border-spacing:10px 60px;}
</style>
</head>
<body>
<table border="1" class="t" >
<caption> 曲径通幽技术论坛 </caption>
<tr>
<td> [url]http://www.groad.net[/url] </td>
<td> 学习与分享 </td>
</tr>
</table>
</body>

复制代码

效果图：

上面代码中，10px 表示 X 轴的间距；60px 表示 Y 轴的间距。

empty-cells 隐藏或显示单元格

属性设置是否显示表格中的空单元格（仅用于“分离边框”模式）。考察下面代码：

<table border="1" class="t" > <caption> 曲径通幽技术论坛 </caption>
<tr>
<td> [url]http://www.groad.net[/url] </td>
<td> 学习与分享 </td>
<td width="60"> </td>
</tr>
</table>

复制代码

效果图：

这里有个空的单元格，可以通过上述属性将其隐藏：

<style type="text/css">
.t { border-spacing:10px 60px; empty-cells:hide;}
</style>
</head>
<body>
<table border="1" class="t" >
<caption> 曲径通幽技术论坛 </caption>
<tr>
<td> [url]http://www.groad.net[/url] </td>
<td> 学习与分享 </td>
<td width="60"> </td>
</tr>
</table>
</body>

复制代码

效果图：

如果想将其显示出来，就将 hide 改为 show　即可。

下面介绍一种表格的操作效果。跟超链接一样，当鼠标悬停到单元格或行上时（hover）所显示的效果，比如：

<style type="text/css">
.t { border-spacing:10px 60px; empty-cells:hide;}
.t tr:hover{color:red;}
</style>
</head>
<body>
<table border="1" class="t" >
<caption> 曲径通幽技术论坛 </caption>
<tr>
<td> [url]http://www.groad.net[/url] </td>
<td> 学习与分享 </td>
<td width="60"> </td>
</tr>
</table>
</body>

复制代码

此时，当你的鼠标悬停到行上时，单元格中的字体显示为红色。

		自动登录	找回密码
密码			立即注册

[CSS] 表格样式

本帖子中包含更多资源

相关帖子

浏览过的版块