css :border-collapse属性解决Table的边框问题
程序员文章站
2022-04-01 14:20:44
...
表格的边框算是页面制作中最头痛的,带边线的表格在之前非常讨厌做,不过今天终于解决了这个问题,下面将示例与大家分享下
页面制作中最头痛的,表格的边框算是其一了,很讨厌做带边线的表格,今天终于解决了这个问题
border-collapse属性 很好的解决了纠结了很久的问题
CSS
border-collapse属性 很好的解决了纠结了很久的问题
CSS
代码如下:
.table{ border: 1px solid #ccc; border-collapse: collapse; width:80%;} .table th, .table td{ border: 1px solid #ccc; padding: 10px; }
Html
<table class="table"> <thead> <tr> <th>id</th> <th>作者</th> <th>书名</th> <th>内容</th> <th>分类</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>唐家三少</td> <td>斗破苍穹</td> <td>斗破苍穹斗破苍穹</td> <td>玄幻</td> </tr> <tr class="success"> <td>001</td> <td>唐家三少</td> <td>斗破苍穹</td> <td>斗破苍穹斗破苍穹</td> <td>玄幻</td> </tr> </tbody> </table>
PS:使用border-collapse属性之前和之后的对比图
以上就是css :border-collapse属性解决Table的边框问题的详细内容,更多请关注其它相关文章!
推荐阅读
-
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
-
解决CSS3的opacity属性带来的层叠顺序问题
-
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
-
css display table 自适应高度、宽度问题的解决
-
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
-
解决CSS3的opacity属性带来的层叠顺序问题
-
html的基本介绍、css的简单介绍、图片间隙问题的解决、边框的简单介绍
-
关于table中,td的上下边框间距问题_html/css_WEB-ITnose
-
CSS使用table-layout:fixed后导致单元格宽度不受控制的问题解决
-
CSS的display属性list-item的list-style-type显示不出来的问题解决