文章目录

使用css将table td边框合并为细边框

还记得第一次使用table的时候,无论怎么弄,边框都不是自己想要的效果。

因为只想让框边成为一条细线,当时就在想有这么难吗?

不过后来还是解决了,今天突然想起,就简要的写一下分享出来。

希望对遇到这样问题的小伙伴有所帮助。

对于这个问题,有一个俗语叫做“table边框合并”。

最主要就是用到border-collapse: collapse;这段代码。

html代码<style>
     table{
         margin: 0 auto;
         width: 300px;
         border:1px red solid;
     }
     th,td {
         text-align: center;
         border: 1px blue solid;
     }
  </style>
  <table>
     <tr>
         <th>新闻标题</th>
         <th>指数</th>
         <th>访问量</th>
     </tr>
     <tr>
         <td>千万劳斯莱斯被撞</td>
         <td>293436</td>
         <td>88</td>
     </tr>
     <tr>
         <td>老师卧底揭校园贷</td>
         <td>396610</td>
         <td>98</td>
     </tr>
     <tr>
         <td>学生被学姐骗传销</td>
         <td>211591</td>
         <td>68</td>
     </tr>
  </table>

我们将上面的css代码中table样式里加入border-collapse: collapse;就可以了。

本文网址:http://www.santii.com/article/175.html


数据更新时间:2018-09-21