table 实现 九宫格布局

时间：2024-03-12 20:05:48

九宫格布局

最近遇到一个题目，是实现一个九宫格布局的。实现的效果大概是下图这种这样子的：

（鼠标悬浮的时候，九宫格的边框颜色是改变的。）

首先想到的是直接使用<table>进行布局，原因很简单，就是想利用 table 里面有一个border-collapse:collapse; 属性，可以很方便地对 border 进行重合。

下面贴出代码：
css

    <style>     
        .tables{
            border-collapse:collapse;
            background-color: #fff;
        }
        .tds{
            text-align:center;
            width: 90px;
            height: 90px;
            font-size: 30px;
            border: 5px solid blue;
            text-decoration: underline;
        }
        .tds:hover{
            border:5px solid red;
        }
    </style>

html

    <table class="tables">
        <tr class="trs">
            <td class="tds">1</td>
            <td class="tds">2</td>
            <td class="tds">3</td>
        </tr>
        <tr class="trs">
            <td class="tds">4</td>
            <td class="tds">5</td>
            <td class="tds">6</td>
        </tr>
        <tr class="trs">
            <td class="tds">7</td>
            <td class="tds">8</td>
            <td class="tds">9</td>
        </tr>
    </table>

结果(看到就瞬间蒙逼了，有一部分 border 被遮挡了)

既然遇到问题了，那就马上改改改，解决的办法是在 td 里再增加一个div。

修改

css

    <style>     
       .tables{
            border-collapse:collapse;
            background-color: #fff;
        }
        .tds{
            width: 90px;
            height: 90px;
            border: 5px solid blue;
        }
        .tds div{
            position: relative;
            width: 90px;
            height: 90px;
        }
        .tds div span{
            display:block;
            text-align: center;
            line-height: 90px;
            font-size: 30px;
            width: 90px;
            height: 90px;
            text-decoration: underline;
        }
        .tds div span:hover{
            position: absolute;
            top: -5px;
            left: -5px;
            width: 90px;
            height: 90px;
            border:5px solid red;
        }
    </style>

html

    <table class="tables">
        <tr class="trs">
            <td class="tds"><div><span>1</span></div></td>
            <td class="tds"><div><span>2</span></div></td>
            <td class="tds"><div><span>3</span></div></td>
        </tr>
        <tr class="trs">
            <td class="tds"><div><span>4</span></div></td>
            <td class="tds"><div><span>5</span></div></td>
            <td class="tds"><div><span>6</span></div></td>
        </tr>
        <tr class="trs">
            <td class="tds"><div><span>7</span></div></td>
            <td class="tds"><div><span>8</span></div></td>
            <td class="tds"><div><span>9</span></div></td>
        </tr>
    </table>

DEMO

另外，也可以通过 给一个最外层的div设置一个 `background-color`来实现视觉上的边框，

栗子请戳 css实现九宫格(二) | Litten的博客

相关文章