设置表格1px边框线的两种方式




方式一

      使用 CSS属性 border-collapse, 合并单元格边框线


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-collapse</title>
<style type="text/css">

/*
    参考: http://www.w3school.com.cn/cssref/pr_tab_border-collapse.asp
    所有主流浏览器都支持 border-collapse 属性
    collapse    如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
*/

table {
    /* 合并单元格框线 */
    border-collapse: collapse;
}
td {
    border: solid 1px red;
    width: 100px;
    height: 28px;
    text-align: center;
    vertical-align: middle;
}
</style>

</head>
<body>

<table>
    <tr>
        <td>a1</td>
        <td>a2</td>
        <td>a3</td>
    </tr>
    <tr>
        <td>b1</td>
        <td>b2</td>
        <td>b3</td>
    </tr>
</table>

</body>


方式二

      表格背景色 + 单元格背景色 +  border-spacing  实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-spacing</title>
<style type="text/css">
/*
    红色边框线 实际上市 单元格之间的间隙 (露出表格的背景色)
*/
table {
    background-color: red;
    border-spacing: 1px;
}
td {
    
    background-color: white;

    width: 100px;
    height: 28px;
    text-align: center;
    vertical-align: middle;
}
</style>

</head>
<body>

<table>
    <tr>
        <td>a1</td>
        <td>a2</td>
        <td>a3</td>
    </tr>
    <tr>
        <td>b1</td>
        <td>b2</td>
        <td>b3</td>
    </tr>
</table>

</body>


你可能感兴趣的:(表格,1px边框线)