이 이상한 테이블 동작을 해결하는 방법은 무엇입니까?

Question

내 웹 사이트에 타일이있는 UI를 만들려고 시도했습니다. http://betaa.harshalgajjar.tk/ (100 % 바이러스가 없음)
그러나 사이트에 표시되는 첫 번째 타일은 텍스트가 들어가기에 충분한 공간이 있더라도 이상하게 작동합니다. 마우스가 위에있을 때 아래의 타일 (여전히 다음 <tr>)을 쥐어 짜 웁니다. 테이블에 대한

, 나는 다음과 같은 코드를 사용했다 : 나는 table-layout:fixed를 사용하여 테이블 레이아웃을 고정 할 수 없습니다 그러나
#tiles{table-layout:fixed;width:100%;height:80%;}
을, 또한 최대 높이를 설정했지만, 심지어 아무데도 나를 도왔 그 .

내가 참조를 위해 몇 가지 추가 코드를 제공 한 다음 .text는 마우스 오버에 볼 수

<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> 

*을.

그리고 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

변경 단순히 증가 또는 20 % 높이를 변경하는 것을 줄일 수 있습니다 height:20%-height:35px; 변경이

.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)} 

이

.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)} 

.