Question

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

首选纯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>

`

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

1 个答案: