锁定td的高度_如何固定单元格的高度

目标

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

实现方式

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

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

最终效果

示例代码

demo

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;

}

标题1	标题2	标题3
11	这个内容比较多啊，会更改单元格的高度	33.000