首页 > 其他 > 详细

一个属性解决Table的边框问题(border-collapse )

时间:2014-03-26 16:57:02      阅读:352      评论:0      收藏:0      [点我收藏+]

页面制作中最头痛的,表格的边框算是其一了,很讨厌做带边线的表格,今天终于解决了这个问题

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属性之前和之后的对比图

bubuko.com,布布扣bubuko.com,布布扣

一个属性解决Table的边框问题(border-collapse ),布布扣,bubuko.com

一个属性解决Table的边框问题(border-collapse )

原文:http://blog.csdn.net/phoebe0549/article/details/22165163

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!