table 實現 九宮格布局

九宮格布局

最近遇到一個題目，是實現一個九宮格布局的。實現的效果大概是下圖這種這樣子的：

（鼠標懸浮的時候，九宮格的邊框顏色是改變的。）

首先想到的是直接使用<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的博客