首页 / CSS / 用css来设置table的border，考虑兼容性

用css来设置table的border，考虑兼容性

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了用css来设置table的border，考虑兼容性，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1884字，纯文字阅读大概需要3分钟。

内容图文

在网页中table是一种很好的展示数据的标签。默认情况下，table是没有border的，但是我们为了好看，经常要给table加上border。而且IE7/8/9下border的颜色还不一样，下面我们就来看看如何用css来控制table的border的显示。
首先，我们创建一个简单的table，代码如下：
[html]
<table class="my-table">
<tr>
<td>first row</td>
<td>first row</td>
</tr>
<tr>
<td>second row</td>
<td>second row</td>
</tr>
</table>
初始样式很简单：
[css]
.my-table {
border: 1px solid #ccc;
}
这时候，table在各个浏览器下面表现几乎一致，我选取了chrome下的截图

用css来设置table的border，考虑兼容性 - 文章图片

这时候，如果我们需要每行都加上border呢，应该怎么做？聪明的你，应该想到了tr标签吧，没错，我们来试试看，改写css如下：
[css]
.my-table {
border: 1px solid #ccc;
}
.my-table tr {
border: 1px solid blue;
}
然后刷新下页面，很遗憾，什么都没有发生。说明，在tr上面写border是没有作用的。那么，我们再试试td标签吧，说不定会有惊喜哦，改写css如下：
[css]
.my-table {
border: 1px solid #ccc;
}
.my-table td {
border: 1px solid blue;
}
这下子我们能看到新的变化咯，各浏览器表现基本一致，但美中不足的是，td的border之间有空格：

用css来设置table的border，考虑兼容性 - 文章图片

为了美观，我们还得去掉单元格之间的空白，使用border-collapase:collapase，改写css如下：
[css]
.my-table {
border: 1px solid #ccc;
border-collapse: collapse;
}
.my-table td {
border: 1px solid blue;
}
看看现在的table是什么个样子，不同浏览器下表现不一样咯。我们从下图可以看到，在chrome和FF下面，td的边框会取代table外面的边框，而IE下面table的外框没有变化，下次用点艳丽的颜色来标识更明显。

用css来设置table的border，考虑兼容性 - 文章图片用css来设置table的border，考虑兼容性 - 文章图片

那么，怎样才能达到一致呢？我发现，如果将table的外边框的宽度增大就可以；严格说来，应该遵循这么一个规则，外边框的宽度和td的宽度比较，哪个宽则显示该边框。
例如我分别设置table和td的border宽度为2px和1px，然后再设置一个5px和4px来对比看看（注意，我已经把颜色换得更醒目咯）

用css来设置table的border，考虑兼容性 - 文章图片用css来设置table的border，考虑兼容性 - 文章图片

其实，通过实验我们发现，这个时候各个浏览器下面，table的表现是一致的。平时在写css的时候，使用上面的代码，就能保证大部分浏览器的兼容性啦，包括IE6。

内容总结

以上是互联网集市为您收集整理的用css来设置table的border，考虑兼容性全部内容，希望文章能够帮你解决用css来设置table的border，考虑兼容性所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/415094.html

来源：【匿名】