文档章节

如何固定单元格的高度

whoru
 whoru
发布于 2017/06/27 09:43
字数 270
阅读 174
收藏 0

目标

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

实现方式

在 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>

© 著作权归作者所有

whoru
粉丝 17
博文 156
码字总数 76422
作品 0
济南
高级程序员
私信 提问
html 单个单元格内多条数据划分多个单元格

如何把如图所示的几行数据在一个单元格中划分成固定高度的单元格,包括右边那一列,划分好后能通过点击按钮改变右边单元格的内容。。

Demo0621
2016/02/16
620
1
css揭秘实战技巧 - 结构与布局[六]

全目录 本系列文章,主要是围绕css3属性,实现我们常见的各种效果,这些效果都是我们实战开发中经常可以用到的效果: css揭秘实战技巧- 背景与边框 [一] css揭秘实战技巧- 形状 [二] css揭秘...

沉默抒怀者
05/06
0
0
面试之CSS篇 - 实现三栏布局的延伸

以下整理给金三银四求职的小伙伴,同时也是为了巩固笔者所学的知识,希望对大家有所帮助,后面将会陆续整理出其他篇章 js 系列 、http 、react、vue、算法等... 本文探讨下面试常谈问题之三栏...

不吃早餐
03/11
0
0
关于Excel单元格显示的问题,求大神们帮忙啊

已知excel单元格的宽度,往里边不定长度的追加字符串,如何判断追加当前字符串后会超出单元格的最高高度而无法显示?求大神来帮忙解决这个VBA问题。 (PS:因为考虑到版面的问题,所以不能拉宽...

alidaxian
2013/06/11
132
2
iOS中的UITableView自定义Cell(模仿新浪微博)

定义一个KCStatusTableViewCell实现UITableViewCell,一般实现自定义UITableViewCell需要分为两步:第一初始化控件;第二设置数据,重新设置控件frame。原因就是自定义Cell一般无法固定高度,...

Dumplings
2016/05/23
138
0

没有更多内容

加载失败,请刷新页面

加载更多

Jenkins系列_插件安装及报错处理

进入Jenkins之后我们可以进行插件的安装,插件管理位于以下模块: 发现上面报了一堆错误,是因为插件的依赖没有安装好,那么这一节,就先把这些错误解决掉吧。解决完成后,也就基本会使用插件...

shzwork
今天
2
0
mysql mysql的所有查询语句和聚合函数(整理一下,忘记了可以随时看看)

查询所有字段 select * from 表名; 查询自定字段 select 字段名 from 表名; 查询指定数据 select * from 表名 where 条件; 带关键字IN的查询 select * from 表名 where 条件 [not] in(元素...

edison_kwok
昨天
9
0
解决多线程并行加载缓存问题(利用guava实现)

依赖 com.google.guava:guava:20.0 import com.google.common.cache.Cache;import com.google.common.cache.CacheBuilder;import java.util.concurrent.ExecutionException;import j......

暗中观察
昨天
3
0
利用VisualVM 内存查看

准备工作,建几个测试类。等下就是要查看这几个类里面的属性 package visualvm;public class MultiObject { private String str; private int i; MultiObject(String str...

冷基
昨天
2
0
组装一台工作游戏两用机

一、配置清单如下: 分类 项目 价格(元) 主板 华硕(ASUS)TUF Z370-PLUS GAMING II 电竞特工 Z370二代 支持9代CPU 1049 CPU 英特尔(Intel) i7 8700K 酷睿六核 盒装CPU处理器 2640 风扇 九...

mbzhong
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部