如何固定单元格的高度

最新推荐文章于 2021-09-30 10:06:04 发布

weixin_33897722

最新推荐文章于 2021-09-30 10:06:04 发布

阅读量219

点赞数

原文链接：https://my.oschina.net/antsky/blog/1036387

版权

为什么80%的码农都做不了架构师？>>>

目标

固定单元格的高度，不随内容的增多而撑开，只显示固定的行数，多余的内容忽略

实现方式

在 td 内容的外层包一个 span，并设置 span 的最大高度（max-height），追加 overflow: hidden; 以隐藏多余的部分

注意：这里必须使用 max-height，如果使用 height ,则会引起其他同类的单元格无法垂直居中；如果再用 line-height 去修正，则内容多的单元格显示内容又会减少

最终效果

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<style type="text/css">
    table {
        width: 300px;
        border-bottom: 2px solid #2AB65B;
        border-right: 2px solid #2AB65B;
    }
    table th,table td {
        border-left: 2px solid #2AB65B;
        border-top: 2px solid #2AB65B;
        font-weight: normal;
        padding: 1px;
    }
    table .td-content {
        display: block;
        max-height: 42px;
        overflow: hidden;
    }
</style>
<body>
<table cellpadding="0" cellspacing="0">
    <tr>
        <th>标题1</th>
        <th>标题2</th>
        <th>标题3</th>
    </tr>
    <tr>
        <td width="20%">11</td>
        <td width="40%"><span class="td-content">这个内容比较多啊，会更改单元格的高度</span></td>
        <td width="40%" align="right"><span class="td-content">33.000</span></td>
    </tr>
</table>
</body>
</html>

转载于:https://my.oschina.net/antsky/blog/1036387