美文网首页
如何正确的给表格添加边框

如何正确的给表格添加边框

作者: 一枚程序员的灵感 | 来源:发表于2017-09-29 17:20 被阅读42次

项目开发过程中，我们会遇到很多table，那么如何给table添加自己想要的边框，。

废话不多说，直接开撸：

1， 首先在页面写一个表格如下：

<table>
    <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
 </table>
加自己想要的边框有两种办法：

一，第一种

1，加入边框

<table border="1px solid xxx">， xxx代表自己想要的颜色。

2，去掉默认间距

<table border="1" cellspacing="0" cellpadding="0"> cellspacing单元格间距，cellpadding单元格边距

3，给th ，td加入border="1px solid xxx"，xxx跟table颜色一样。

  • 即可，你就会发现自己想要的边框出来了~。

二，第二种（相比第一种要简单）

1，边框合并

border-color: xxx; border-collapse: collapse;（边框合并，该属性设置表格的边框是否被合并为一个单一的边框）

注意：不要给table设置边框。只设置颜色和边框合并。

2，给th，td 加入边框，

border="1px solid xxx"

现在，你又会发现自己想要的边框出来了，相比第一种是不是略简单点。

---end.

相关文章