When using TABLE tables, beginners in HTML production will encounter how to change the edge thickness, because the default TABLE edge setting is very thick even if it is 1px. Therefore, there are other methods used to create thin line borders, and here is a method of using CSS to implement thin lines, which is very effective and compatible with all browsers.
If you simply set the border for a thin line table, it is difficult to ensure that the browser is compatible. A common practice is to utilize CSS2's "border-collapse:collapse;" attribute merge table borders; And set the left and top borders for table elements, and the right and bottom borders for th and td elements.
HTML：
<table> <tr> <th>table head (row1, col1)</th> <th>table head (row1, col2)</th> <th>table head (row1, col3)</th> </tr> <tr> <td>table data (row1, col1)</td> <td>table data (row1, col2)</td> <td>table data (row1, col3)</td> </tr> <tr> <td>table data (row2, col1)</td> <td>table data (row2, col2)</td> <td>table data (row2, col3)</td> </tr>
</table>CSS:
table{border-collapse:collapse; border-spacing:0; border-left:1px solid #888; border-top:1px solid #888; background:#efefef; }
th,td{border-right:1px solid #888; border-bottom:1px solid #888; padding:5px 15px; }
th{font-weight:bold; background:#ccc; } |
Posted on 4/18/2015 10:19:21 PM
|
|
|
|
Posted on 7/15/2015 1:06:57 AM
|
Landlord|
Posted on 3/11/2021 10:51:40 AM
|
Check out the support
