html - 尽管有内容，但缩小表格单元格高度

Question

我希望有一种方法可以缩小 td 的高度，这样高度正是我想要的，例如 6px 当它包含 11px 文本时。我设想能够看到单元格内容的上半部分。

我不想只设置 div 高度的原因是我希望每一行都具有相同的高度，并且有跨行的单元格所以 div 会在它应该能够的时候将内容截断到一个单元格扩展到两个单元格。我希望这是有道理的...

<table>
    <thead>
        <tr>
            <th style="height: 0px; width: 0px;">
            </th>
            <th style="width: 25px;">
            </th>
            <th style="width: 25px;">
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="height: 6px;">
            </td>
            <td>
                <div>
                    Some table data</div>
            </td>
            <td rowspan="2">
                <div>
                    Some data that is two rows high</div>
            </td>
        </tr>
        <tr>
            <td style="height: 6px;">
            </td>
            <td>
                <div>
                    Some more data</div>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

你不能限制表格单元格的高度，但你可以在立即 <div> 上强制高度小号:

td > div {
    overflow: hidden; 
    height: 6px;
}