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

W3C笔记－CSS巧妙设置table边框border的样式

2010-12-08 17:37 846 查看
CSS巧妙设置table边框border的样式

虽然这个也不是什么新鲜话题了，但发现还有很多人不会用，作个记录，顺便简化下样式，供大家直接复制使用吧～！

其实也挺简单的，为了使上、下、左、右边框设置不重复，只需将它们分开设置。table标签样式设置left,bottom;td标签设置right,top。

具体操作如下：

首先，定义全局样式，stlye中写入table及td的边框样式：

<style type="text/css">
table{border-left: 1px solid #666; border-bottom: 1px solid #666;}
td{border-right:1px solid #666;border-top: 1px solid #666;}
</style>

其次，border="0" cellspacing="0" cellpadding="0"，这几个标签属性样式必须得写入到table标签中。

 

例如二行三列的表格：

<html>
<head>
<style type="text/css">
table{border-left: 1px solid #666; border-bottom: 1px solid #666;}
td{border-right:1px solid #666;border-top: 1px solid #666;}
</style>
</head>

<body>
<table width="700" border="0" cellspacing="0" cellpadding="0" >
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
</table>
</body>
</html>

 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  table border css c
相关文章推荐
新的分享
章节导航