html - 表格单元格在行内的高度不同

Question

我正在用 html 创建一个表格。每个表格单元格的高度都必须完全相同。当我在表格单元格中放置一个 div 时，行中表格单元格之间的高度不同。包含文本的表格单元格高 61.6 像素，而包含 div 的表格单元格高 61.2 像素。我使用的是谷歌浏览器，这是我唯一需要表格单元格高度均匀的浏览器。如何确保所有表格单元格的高度相同？

首选纯 CSS 解决方案，但可以接受 javascript 解决方案。

table {
        border-collapse: collapse;
        width: 600px;
    }

    tbody {
        border: 1px solid black;
    }

    th {
        padding: 0 6px;
        text-align: center;
        background: black;
        color: white;
    }

    tr td {
        background: darkgray;
    }

    tr:nth-child(even) td {
        background: gray;
    }

    td.small {
        font-size: 9px;
    }

    td.large {
        font-size: 18px;
    }

    td {
        padding: 6px;
        border-color: black;
        border-width: 0 1px;
        border-style: solid;
        height: 18px;
    }

    .evilobject {
        height: 50px;
        background: red;
    }

<table>
    <tbody>
        <tr>
            <th>Large Font</th>
            <th>Small Font</th>
            <th>Contains Div</th>
        </tr>
        <tr>
            <td class="large">What the font!?</td>
            <td class="small">What the font!?</td>
            <td class="small"><div class="evilobject">Evil div object</div></td>
        </tr>
        <tr>
            <td class="large">What the font!?</td>
            <td class="small">What the font!?</td>
            <td class="small"><div class="evilobject">Evil div object</div></td>
        </tr>
        <tr>
            <td class="large">What the font!?</td>
            <td class="small">What the font!?</td>
            <td class="small"><div class="evilobject">Evil div object</div></td>
        </tr>
    </tbody>
</table>

Answer 1

使用 tr 代替 td 并使用通用选择器`

*{
   box-sizing: border-box;
   padding: 0;
   margin: 0;
}
table {
        border-collapse: collapse;
        width: 600px;
    }

    tbody {
        border: 1px solid black;
    }

    th {
        padding: 0 6px;
        text-align: center;
        background: black;
        color: white;
    }

    tr td {
        background: darkgray;
    }

    tr:nth-child(even) td {
        background: gray;
    }

    td.small {
        font-size: 9px;
    }

    td.large {
        font-size: 18px;
    }

     tr{
        padding: 6px;
        border-color: black;
        border-width: 0 1px;
        border-style: solid;
        height: 18px;
       
    }

    .evilobject {
        height: 50px;
        background: red;
    }

<table >
    <tbody>
        <tr>
            <th>Large Font</th>
            <th>Small Font</th>
            <th>Contains Div</th>
        </tr>
        <tr>
            <td class="large">What the font!?</td>
            <td class="small">What the font!?</td>
            <td class="small"><div class="evilobject">Evil div object</div></td>
        </tr>
        <tr>
            <td class="large">What the font!?</td>
            <td class="small">What the font!?</td>
            <td class="small"><div class="evilobject">Evil div object</div></td>
        </tr>
        <tr>
            <td class="large">What the font!?</td>
            <td class="small">What the font!?</td>
            <td class="small"><div class="evilobject">Evil div object</div></td>
        </tr>
    </tbody>
</table>

`