1个特性border

2021-01-20 09:41 jianzhan
网页页面制做中最头痛的，报表的边框算是其1了，很反感做带边线的报表，今日终究处理了这个难题

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>周家3少</td>
<td>斗破天穹</td>
<td>斗破天穹斗破天穹</td>
<td>玄幻</td>
</tr>
<tr class="success">
<td>001</td>
<td>周家3少</td>
<td>斗破天穹</td>
<td>斗破天穹斗破天穹</td>
<td>玄幻</td>
</tr>
</tbody>
</table>

PS：应用border-collapse特性以前和以后的比照图

为您推荐