在創建table表格時，當心「神秘人」改了你的代碼，而你卻不知道！

05-21

來自專欄 GeekKnow

有些細節問題你不是親自碰到可能真的一頭霧水。下面就講一個「眼見不為實」的例子，應該對你的開發有些小的啟示。

為了便於大家可以直接複製粘貼進行測試，上代碼：

在HBuilder里創建一個表格table，並簡單設置樣式：

<!DOCTYPE html>

<html>

<head>

<style>

table{

border:1px solid;/*邊框*/

border-spacing:0;/*去掉單元格的間隙*/

border-collapse: collapse;/*合併單元格的邊框*/

}

td{

border:1px solid;

}

table>tr{

background-color: red;

}

</style>

</head>

<body>

<table>

<tr>

</tr>

</table>

</body>

</html>

在瀏覽器的效果是這樣的：

為什麼為tr設置的red背景顏色沒有效果呢？明明已經設置了啊？

難道table與tr不是父子關係嗎？明明就是父子啊！

告訴你，其實你被騙了！「你的代碼被神秘人改動了，但你還被蒙在鼓裡」打開firebug：

是不是很驚訝？！怎麼多了一個<tbody></tbody>?這樣一來，table肯定就不是tr的父親，而是tr的祖先，自然用table>tr{}來為td設置背景顏色肯定是失敗的啊！

換個正確的方式試一下呢：

看一下瀏覽器效果：

看來已經搞定了！！！

總結：在創建table表格時，如果在編輯器里你的代碼沒有手動編寫<tbody>,那麼，瀏覽器在渲染頁面的時候會自動添加一個<tbody>然後將tr放入tbody中，所以下次遇到這種類似的情況一定要注意，其實最好的方式就是把tbody手動寫上，以防後續它搗蛋！