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

女爷i 2021-09-10 11:12 372阅读 0赞

在网页中table是一种很好的展示数据的标签。默认情况下，table是没有border的，但是我们为了好看，经常要给table加上border。而且IE7/8/9下border的颜色还不一样，下面我们就来看看如何用css来控制table的border的显示。

首先，我们创建一个简单的table，代码如下：

<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>

初始样式很简单：

.my-table {
        border: 1px solid #ccc;
    }

这时候，table在各个浏览器下面表现几乎一致，我选取了chrome下的截图

![Center][]  
这时候，如果我们需要每行都加上border呢，应该怎么做？聪明的你，应该想到了tr标签吧，没错，我们来试试看，改写css如下：

.my-table {
        border: 1px solid #ccc;
    }
    .my-table tr {
        border: 1px solid blue;
    }

然后刷新下页面，很遗憾，什么都没有发生。说明，在tr上面写border是没有作用的。那么，我们再试试td标签吧，说不定会有惊喜哦，改写css如下：

.my-table {
        border: 1px solid #ccc;
    }
    .my-table td {
        border: 1px solid blue;
    }

这下子我们能看到新的变化咯，各浏览器表现基本一致，但美中不足的是，td的border之间有空格：  
![Center 1][]

为了美观，我们还得去掉单元格之间的空白，使用border-collapase:collapase，改写css如下：

.my-table {
        border: 1px solid #ccc;
        border-collapse: collapse;
    }
    .my-table td {
        border: 1px solid blue;
    }

看看现在的table是什么个样子，不同浏览器下表现不一样咯。我们从下图可以看到，在chrome和FF下面，td的边框会取代table外面的边框，而IE下面table的外框没有变化，下次用点艳丽的颜色来标识更明显。

![Center 2][]![Center 3][]

那么，怎样才能达到一致呢？我发现，如果将table的外边框的宽度增大就可以；严格说来，应该遵循这么一个规则，外边框的宽度和td的宽度比较，哪个宽则显示该边框。

例如我分别设置table和td的border宽度为2px和1px，然后再设置一个5px和4px来对比看看（注意，我已经把颜色换得更醒目咯）：

![Center 4][] ![Center 5][]

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

**update**:**20121108**

其实在tr上写border是有样式的，只不过与在td上写border的样式相同。如果想单独针对一行写border，那么你可以使用如下的方式：

.my-table td {
        border-bottom:1px solid blue;
    }

最终的样式如下：

![Center 6][]  
注：对于table，可以不设置border，只设置期collapse，然后设置td的border

[Center]: /images/20210511/c55d2f8fe6ea4e76a66e269e11c0d30a.png
[Center 1]: /images/20210511/ed2d185be5bc4261a90d9932943a4217.png
[Center 2]: https://img-blog.csdn.net/20150115181452290?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1eGlhbzcyMzg0Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 3]: /images/20210511/5169038e8b464f339658a59dc97d0918.png
[Center 4]: https://img-blog.csdn.net/20150115181517562?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1eGlhbzcyMzg0Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 5]: /images/20210511/e209ab67f1364f4d93cecff8ec18f9a8.png
[Center 6]: /images/20210511/9e9a55e5a59a433da5b6da4e8d5263fe.png