Question

看看这个小提琴：

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都有height = 40px。但行高度为36px。

如何将行高设为100%？

Answer 1

为您的表格应用cellpadding和cellspacing为零。

<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

无法将行高设置为表高度

1 个答案: