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

最新推荐文章于 2021-06-07 11:39:10 发布

forwardNow

最新推荐文章于 2021-06-07 11:39:10 发布

阅读量3.8k

点赞数

分类专栏：前端文章标签：表格 1px边框线

本文链接：https://blog.csdn.net/wuqinfei_cs/article/details/38709329

版权

前端专栏收录该内容

268 篇文章 0 订阅

订阅专栏

方式一

使用 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>