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

发布时间：2020-12-14 18:57:11 所属栏目：资源来源：网络整理

导读：我正在尝试构建一个html表,但我想强制所有行具有相同的高度(无论单元格中有多少内容).如果一个单元格超出空间,我希望它能够截断文本并隐藏其余部分. 这可能使用CSS等吗？解决方法仅IE CSS： #fixedheight { table-layout: fixed;}#fixedheight td { height

我正在尝试构建一个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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!