table九宮格hover實現

<table border="1" cellpadding='0' cellspacing='0'>  <tr>    <th>Month</th>    <th>Savings</th>  </tr>  <tr>    <td>January</td>    <td>$100</td>  </tr></table>

cellpadding 規定單元邊沿與其內容之間的空白。

cellspacing 規定儲存格之間的空白。

九宮格

<table><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr></table>

CSS

                table,td{border:5px inset blue;border-collapse: collapse;}td{width: 50px;height: 50px;text-align: center;line-height: 50px;}td:hover{border: 5px solid red;cursor: pointer;}

border-collapse 設定表格的邊框是否被合并為一個單一的邊框（不用設定cellspacing）

將table和td的border設定為inset（定義 3D inset 邊框），這樣hover時便會四邊全部顯示，否則顯示部分