HTML tips: Change the table border to a thin line

When creating a table in HTML, a newbie will encounter how to change the rough line of the edge line, because the default table edge setting is very rough even if it is 1px. Therefore, some other methods will be used to create a thin border. Here we will introduce a method to use CSS to achieve the fine line, which is very effective and compatible with all browsers.

If the border is set for a thin-line table, it is difficult to ensure browser compatibility. The common practice is to use the "border-collapse: collapse;" attribute of css2 to merge the table border, and set the left border and the top border for the table element, set the right and bottom borders for the 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;}