如何解决这个奇怪的表行为？

Question

我尝试在我的网站上创建一个包含图块的用户界面 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％以更改身高。