在转载CSS觉问题及解决办法时看到的这样定义表格边框的方法，如果用表格的border="1"属性定义，实际显示的宽度要比1px粗。所以我直到现在都是定义table的left和top边框，然后定义td的right和bottom边框，这样也用css定义了一个表格的边框。没想到还有这么简单的方法，今天单独摘出来奉献给大家，希望能给您带来帮助。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>定义表格边框的方法</title>
<style>
table{ border-collapse:collapse; }
td{ border:#ccc solid 1px; padding:5px; }
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>今天学了个新方法，奉献给大家</td>
<td>以前都是定义table的上边和左边，然后定义td的右边和下边</td>
<td>没想到还有这么简便的方法，以后就用这个方法了</td>
</tr>
<tr>
<td>我的网络家园</td>
<td>www.htmchina.cn</td>
<td>欢迎大家来访问</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
<html>
--------------------------------------------------------------------------------------------------------------------------
<style type="text/css">
#table table {
border-collapse:collapse;
border-right:#ff0000 1px solid;
border-bottom:#ff0000 1px solid;
border-color: #ff0000;
}
#table td {
border-left:#ff0000 1px solid;
border-top:#ff0000 1px solid;
}
</style>
<body style="margin:0">
<br>
方法1：利用亮边框和暗边框[推荐]
<table width="100%" height="100" border="1" bordercolorlight="red" bordercolordark="white" cellpadding="0" cellspacing="0">
<tr>
<td>www.blueidea.com</td>
<td>www.blueidea.com</td>
</tr>
<tr>
<td>www.blueidea.com</td>
<td>www.blueidea.com</td>
</tr>
</table>
方法2：利用collapse[推荐]
<table width="100%" height="100" border="1" bordercolor="blue" cellspacing="0" style="border-collapse:collapse">
<tr>
<td>www.blueidea.com</td>
<td>www.blueidea.com</td>
</tr>
<tr>
<td>www.blueidea.com</td>
<td>www.blueidea.com</td>
</tr>
</table>
方法3：(表格嵌套)
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ff0000">
<tr>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr bgcolor="#ffffff">
<td>极细表格边框</td>
<td>极细表格边框</td>
<td>极细表格边框</td>
</tr><tr bgcolor="#ffffff">
<td>极细表格边框</td>
<td>极细表格边框</td>
<td>极细表格边框</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
方法4：(用css实现)
<div id="table">
<table width="100%" border="0" >
<tr>
<td>极细表格边框</td>
<td>极细表格边框</td>
<td>极细表格边框</td>
</tr>
<tr>
<td>极细表格边框</td>
<td>极细表格边框</td>
<td>极细表格边框</td>
</tr>
</table>
</div>
方法5：利用单元格的间距
<table width="100%" height="100" border="0" bgcolor="red" cellpadding="0" cellspacing="1">
<tr>
<td bgcolor="white">www.blueidea.com</td>
<td bgcolor="white">www.blueidea.com</td>
</tr>
<tr>
<td bgcolor="white">www.blueidea.com</td>
<td bgcolor="white">www.blueidea.com</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
因此只需要修改表格的cellspacing属性即可，即：<table border=1px cellspacing=0px>，效果如下： ID NAME GENDER 1001 mike male 但是，好像宽度还是没有我们想象的那样：只有一个像素的宽，其实，上图大家...
/ *以适应极限，请替换cour1-> gks_1 cour2-> gks_2 cour3-> gks_3 cour4-> gks_4 cour5-> gks_5 cour6-> gks_6 cour7-> gks_7 * / @media屏幕和（min-device-width： 1000px）{ @import url（' '）; .cour4 {text...
这是一个小脚本，可以对 500 像素的照片进行批量编辑。 我刚刚根据自己的需求开始了它，但可以随意打开具有新功能的 PR，或者只是在此存储库中打开一个问题。 验证 要使用此库，您需要使用 oauth1 配置身份验证。 我...
3.支持按像素（PX）、百分百（%）设置格子的宽/高，或用星号（*）表达自动拉伸 4.支持锁定分割线，不让用户调整 5.支持嵌套使用本分栏控件，实现如EXCEL表格呈现出包括合并单元格在内的布局效果 6.分割样式可在运行...
计算机二级Web程序设计模拟卷（三）- 卷面总分：150分 答题时间：150分钟 试卷题量：67题 一、单选题（共62...______ A.border—width：10px5px20px1px B.border—width：10px20px5px1px C.border—width：5px20pxl0px1
1.省略简写属性值的关键词时会发生什么？ 当省略了部分简写属性值的时候，缺失的部分就会使用该属性的默认值。 2.如何使用颜色控制边框外观？ 我们知道在CSS中边框的使用是非常重要的，我们这里就介绍一下CSS的边框...
图像到卓越image-to-excel是一种由节点驱动的脚本，可以在Microsoft:registered:Excel:registered:中将像素数据从图像转换为单元格背景色。 它经过了优化，仅将像素数据保存为唯一的颜色值。 输出为Excel XML格式。...
*border:1px solid #f00; (2)区别Ie6.0 与Ie7.0、firefox的hack为: border:1px solid #f00!important; border:2px solid #f00; 在(1)中，之所以把*放在后面是因为ff不识别*而导致只对它设置了一次border;而ie ...
切换滚动与分页分页选项每页行数-启用分页时要显示的行数分页类型-多个导航选项列别名覆盖为列显示的名称列宽提示提供百分比或像素（100px或10％）的宽度“提示”。 注意：表格将根据需要自动调整大小，但将使用提供...
应用的用户体验准则 这些是创建外观更好的网站和应用程序的一些简单准则。。 一般设计思路 在进行设计时，请不要重新发明轮子。查找用作指导的示例，然后添加您自己的内容和设计。...一般规则：标题选择1种字体，内容
|--屏幕适配之像素dp和px之间转换 |--工具类之Log的封装类 |--工具类之不同log打印的封装 |--工具类之开启新的Activity |--布局加载器的获取 |--广播接收者之开机启动 |--广播接收者之获取管理员权限 |--广播接收者...
互动式地图通过Google电子表格实时更新，列出了2015年12月各地区（1000像素宽）的区域选举候选人。 光版本集成在文章中一个小部件（534px宽） 。 胡说八道的宾果（a）在国民议会上的讲话（b）足球（c）选举之夜。 ...
而总是隐藏掉黑名单的域（即使未选中“启用”））-添加右键单击选项以打开安全地链接/图像（可以在“选项”中删除）-在以下四种模式之间进行选择：偏执（删除图像和多媒体），SFW1（伪装图像并删除多媒体），...