如何解決這個奇怪的錶行爲？

Question

我試圖在我的網站上創建具有瓷磚的UI http://betaa.harshalgajjar.tk/（100％無病毒）
但是，第一塊，因爲在網站上可見的行爲很奇怪，即使裏面有文本足夠的空間之後，當鼠標懸停時，仍然會擠壓下面的瓷磚（下一個<tr>）。

對於表格，我用下面的代碼：
#tiles{table-layout:fixed;width:100%;height:80%;}
但是我沒能解決表格的佈局，使用table-layout:fixed，我也嘗試設置最大高度，但即使無處幫我。

我提供了一些額外的代碼以供參考：

<table id="tiles" style="table-layout:fixed;max-height:80%;" cellspacing=20> 
<tr><td style="background-color:#E18728;width:100px;height:100px;" class="tdtile"><div class="text">Harshal Gajjar<br><br> Programmer, music lover and tech enthusiast.hjka hjhajdh ajhd hahdqhw oiphjsadhuh uhw9uqh uhiusau wu hjhajdh ajhd hahdqhw oiphjsadhuh uhw9uqh uhiusau wu hjhajdh ajhd hahdqhwsau wu</div></td><td style="background-color:#5FCF80;width:100px;height:100px;"><div class="text">2</div></td><td style="background-color:#CD6A51;width:100px;height:100px;"><div class="text">3</div></td><td style="background-color:#C8FF92;width:100px;height:100px;"><div class="text">4</div></td></tr> 
<tr><td style="background-color:#9351A6;width:100px;height:100px;"><div class="text">5</div></td><td style="background-color:#55ACEE;width:100px;height:100px;"><div class="text">6</div></td><td style="background-color:#C4302B;width:100px;height:100px;"><div class="text">7</div></td><td style="background:url('jobs.jpg');background-size:cover;width:100px;height:100px;"><div class="text">8</div></td></tr> 
</table> 

*在.text可見只在鼠標懸停。

而CSS：

#tiles{table-layout:fixed;width:100%;height:80%;} 
#tiles tr td{text-align:left;color:rgba(255,255,255,1);-webkit-transition:0.5s all ease-in-out;vertical-align:top;font-size:1em;} 
.text{background-color:rgba(0,0,0,0.3);height:35px;;position:relative;-webkit-transition:0.5s all ease-in-out;color:rgba(0,0,0,0)} 
.text:first-line {color: #fff;font-size:1.5em;} 
.text:hover{background-color:rgba(0,0,0,0.3);height:100%;position:relative;bottom:0px;color:rgba(255,255,255,1) !important;} 

截圖爲同一個問題：

鼠標移出的第一個瓷磚

將鼠標懸停在第一個瓷磚

任何幫助，將不勝感激。

Answer 1

更改此

.text{background-color:rgba(0,0,0,0.3);height:35px;;position:relative;-webkit-transition:0.5s all ease-in-out;color:rgba(0,0,0,0)} 

這個

.text{background-color:rgba(0,0,0,0.3);height:20%;position:relative;-webkit-transition:0.5s all ease-in-out;color:rgba(0,0,0,0)} 

簡單地改變height:35px;到height:20%可以增加或減少20％，改變高度。