html – 如何强制表中的所有行具有相同的高度

我正在尝试构建一个html表,但我想强制所有行具有相同的高度(无论单元格中有多少内容).如果一个单元格超出空间,我希望它能够截断文本并隐藏其余部分.

这可能使用CSS等吗？

解决方法

仅IE

CSS：

#fixedheight {
    table-layout: fixed;
}

#fixedheight td {
    height: 20px;
    overflow: hidden;
    width: 25%;
}

HTML：

<table id="fixedheight">
    <tbody>
        <tr>
            <td>content</td>
            <td>lots of content that should spend way more time wrapping down than it should if I were just to have a short bit of stuff,that would be invaded by zombies and the such</td>
            <td>more content</td>
            <td>small content</td>
            <td>enough already</td>
        </tr>
    </tbody>
</table>

通用解决方案

CSS：

#fixedheight {
    table-layout: fixed;
}

#fixedheight td {
    width: 25%;
}

#fixedheight td div {
    height: 20px;
    overflow: hidden;
}

HTML：

<table id="fixedheight">
    <tbody>
        <tr>
            <td>
                <div>content</div>
            </td>
            <td>
                <div>lots of content that should spend way more time wrapping down than it should if I were just to have a short bit of stuff,that would be invaded by zombies and the such</div>
            </td>
            <td>
               <div>more content</div>
            </td>
            <td>
               <div>small content</div>
            </td>
            <td>
               <div>enough already</div>
            </td>
        </tr>
    </tbody>
<table>

原文地址：https://www.jb51.cc/html/224695.html