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

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

原创最新推荐文章于 2021-06-07 11:39:10 发布 · 3.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#表格 #1px边框线

前端专栏收录该内容

268 篇文章

订阅专栏

本文介绍两种利用CSS技巧实现表格中单元格边框视觉上无缝连接的方法：一是通过设置`border-collapse: collapse;`来直接合并边框；二是通过调整表格和单元格的背景色及使用`border-spacing`属性模拟边框合并效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方式一

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