CSS实现表格无外边框效果（只有内十字）

最新推荐文章于 2024-10-09 19:30:02 发布

greystar

最新推荐文章于 2024-10-09 19:30:02 发布

阅读量1.1w

点赞数 3

分类专栏： JS

本文链接：https://blog.csdn.net/greystar/article/details/48211803

版权

JS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

效果如下：

代码如下：

<!DOCTYPE HTML>

<html>
    <head>
        <meta charset="UTF-8" />
        <title>
        </title>
        <style type="text/css">
            table{
                margin:auto;
                width:300px;
               border-collapse:collapse;
            }
            th,td{
                border:1px solid black;
            }
            tr td:first-child{
                border-left:0;
            }
            tr td:last-child {
                border-right:0;
            }
            tr:first-child td,tr:first-child th{
                border-top:0px;
            }
            tr:last-child td{
                border-bottom:0px;
            }
        </style>
    </head>
    <body>
    <table>
            <tr>
                <td>
                    11
                </td>
                <td>
                    22
                </td>
                <td>
                    22
                </td>
            </tr>
            <tr>
                <td>
                    33
                </td>
                <td>
                    44
                </td>
                <td>
                    22
                </td>
            </tr>
            <tr>
                <td>
                    33
                </td>
                <td>
                    44
                </td>
                <td>
                    22
                </td>
            </tr>
        </table>
    </body>
</html>