Невозможно установить высоту строки, равной высоте стола

Взгляните на этот Fiddle:Невозможно установить высоту строки, равной высоте стола

https://jsfiddle.net/rahul_singh1/472532y8/1/

<body> 
    <div class="main"> 
     <table class="top"> 
      <tbody> 
       <tr><td>Text</td></tr> 
      </tbody> 
     </table> 
    </div> 
</body>

CSS:

.main {height:40px; background-color:blue} 
.top {height: 100%; width: 55%; margin: 0px auto 0px auto; background-color:green;} 
.top>tbody>tr {height: 100%;} 
.top>tbody>tr>td {color:red;background-color: white;}

я проверил в DOM. div, table и tbody все они имеют высоту = 40px. Но высота строки идет как 36px.

Как получить высоту строки 100%?

источник

2015-05-16 Rahul

границы-крах: коллапс может быть? https://jsfiddle.net/472532y8/2/ –

Yup Помещение «border-collapse: collapse» свойство за столом работало отлично. Большое спасибо. :) – Rahul

Примените cellpadding и cellpacing к нулю для вашего стола.

<body> 
<div class="main"> 
    <table class="top" cellpadding="0" cellspacing="0"> 
     <tbody> 
      <tr><td>Text</td></tr> 
     </tbody> 
    </table> 
</div> 
</body>

DEMO

Вы можете достичь того же выше, с использованием CSS также. Нанести padding:0; border-collapse:collapse;

.top {height: 100%; width: 55%; margin: 0px auto 0px auto; padding:0; border-collapse:collapse; background-color:green;}

DEMO2

источник

2015-05-16 11:18:56

или border-collapse в css, чтобы избежать дополнительных атрибутов в html ... https://jsfiddle.net/472532y8/2/ –

Да. Я обновил свой ответ. –

Невозможно установить высоту строки, равной высоте стола

ответ

Смежные вопросы