table边框改为细线

默认的TABLE边线设置即使是1px 是很粗的，会使用其他一些方法来制作出细线边框。

利用CSS来实现细线的方法，很有效，而且兼容所有浏览器。

细线表格如果单纯设置边框，很难保证浏览器兼容。常见的做法是利用 CSS2 的 "border-collapse:collapse;" 属性合并表格边框；并对 table 元素设置左边框和上边框，对 th 和 td 元素设置右边框和下边框。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/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;
        }
    </style>
</head>
<body>
    <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>
</body>
</html>