使用CSS实现表格细边框的三种方式_html/css

使用CSS实现表格细边框的三种方式_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:31:53

原创

1585人浏览过

说到表格，虽说随着前端技术的发展div已经遍地开花彻底推翻了table布局的时代。可是当遇到报表之类的操作是table还是非常值得使用的。

由于操作表格的时候不可避免使用到细边框效果，所以我就整理了一下常用的三种实现细边框表格的方式，分享给大家，代码如下：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>细边框表格的实现方式</title>    <style>        /*可以应用于所有浏览器,但是需要设置table的标签属性:border="0" cellpadding="0" cellspacing=1*/        .demo1 {            background-color: #ccc;        }            .demo1 th,.demo1 td {                background-color: #fff;            }        /* 利用表格样式:{border-spacing:0px;}和表格与单元格背景色的不同来实现细边框。[注:IE7及以前的浏览器不支持border-spacing]*/        .demo2 {            background-color: #ccc;            border-spacing: 1px;        }            .demo2 th, .demo2 td {                background-color: #fff;                            }        /* 为表格设置合并边框模型:{border-collapse: collapse;} 实现细边框。[注:如果没有规定 !DOCTYPE,则 border-collapse 可能产生意想不到的结果。] */        .demo3 {            border: 1px solid #ccc;            border-collapse: collapse;        }            .demo3 th, .demo3 td{                border: 1px solid #ccc;            }    </style></head><body>    <p>Demo1</p>    <table class="demo1" border="0" cellpadding="0" cellspacing="1">        <thead>            <tr>                <th>Title1</th>                <th>Title2</th>                <th>Title3</th>            </tr>        </thead>        <tbody>            <tr>                <td>Row1-01</td>                <td>Row1-02</td>                <td>Row1-03</td>            </tr>            <tr>                <td>Row2-01</td>                <td>Row2-02</td>                <td>Row2-03</td>            </tr>        </tbody>    </table>    <p>Demo2</p>    <table class="demo2">        <thead>            <tr>                <th>Title1</th>                <th>Title2</th>                <th>Title3</th>            </tr>        </thead>        <tbody>            <tr>                <td>Row1-01</td>                <td>Row1-02</td>                <td>Row1-03</td>            </tr>            <tr>                <td>Row2-01</td>                <td>Row2-02</td>                <td>Row2-03</td>            </tr>        </tbody>    </table>    <p>Demo3</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2019">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679978185950.png" alt="飞书多维表格">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2019">飞书多维表格</a>
                            <p>表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="飞书多维表格">
                                <span>26</span>
                            </div>
                        </div>
                        <a href="/ai/2019" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="飞书多维表格">
                        </a>
                    </div>
                <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>    <table class="demo3">        <thead>            <tr>                <th>Title1</th>                <th>Title2</th>                <th>Title3</th>            </tr>        </thead>        <tbody>            <tr>                <td>Row1-01</td>                <td>Row1-02</td>                <td>Row1-03</td>            </tr>            <tr>                <td>Row2-01</td>                <td>Row2-02</td>                <td>Row2-03</td>            </tr>        </tbody>    </table></body></html>

登录后复制

<strong>效果图：</strong>

登录后复制