之前的项目做过这种需求,但是由于不是自己亲手实现,所以以为只要使用 text-overflow 就可以实现这个需求了。但实事证明并没有那么简单。下面就把这个需求的实现要点理一下。
先说一下几个要点:
- table 的 “table-layout”属性要声明为“fixed”
- 对表格的第一行中的每个单元格设置宽度。我用的是数值,不是百分比。
- 对可能出现内容很长的单元格,设置以下三个属性:
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
好了,就这么多了。下面上代码 :
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .dataTable { width: 100%; border: none; border-collapse: collapse; border-spacing: 0px !important; display: table; table-layout:fixed; } .dataTable th,.dataTable td { padding: 0px; margin: 0px; border: 1px solid #BEBFD3; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #col1 { width: 70px; } #col2 { width: 220px; } #col3 { width: 300px; } #col4 { width: 180px; } </style> <body> <table class="dataTable"> <thead> <tr> <th id="col1">Header1</th> <th id="col2">Header2></th> <th id="col3">Header3</th> <th id="col4">Header4</th> </tr> </thead> <tbody> <tr> <td>content1</td> <td>content2content2content2content2content2content2content2content2content2content2content2content2content2content2content2</td> <td>content3</td> <td>content4</td> </tr> <tr> <td>content1</td> <td>content2</td> <td>content3content3content3content3content3content3content3content3content3content3content3content3content3content3content3</td> <td>content4</td> </tr> </tbody> </table> </body> </html>
代码见附件,可以运行看看效果。
另外,如果想在页面放大缩小的过程中,保持某几个列的宽度不变,其他列的宽度自动进行计算的话,可以采用以下的方案:
.col1{ width: 60%; } .col2{ width: 40%; } .col13{ width: 200px; }
以上表示, 表格共有三列,其中,第三列的宽度被固定为了 200px,所以在表格放大缩小的过程中,它的宽度始终保持为 200px,但是表格剩下的宽度将被分配给第一列和第二列,这两列将以 3:2 的比例瓜分剩下的宽度 。
打个比方,表格在放大或者 缩小 之后,它的的宽度 为300px,那么这个时候,表格的三列的宽度将分别为:
60px 40px 200px
相关推荐
swt table 实现换行
layui table合并单元格.zip 跨行自动合并单元格
layui数据表格自动换行,当设置固定列时,会出现行高不一致的问题,用户体验不好,只需要在页面中增加几行代码即可解决。
使用bootstrap-table客户端分页生成表格,导出表格按照单元格内容相同合并单元格
使用layu数据表格i的时候,文字太多会使用……代替,用户体验不好,只需要在页面中增加几行样式文件即可解决。
日常开发中,经常遇到表格里需要自动合并单元格,考虑到写服务器控件比较消耗性能,因些还是把这种工作交给客户端Javascript去做吧,基于习惯用jquery框架,所以封装了一个Jquery插件。
CSS控制Table单元格强制换行与强制不换行 我们知道Div的换行和不换行的css写法。但对于表格单元格只知道一个属性nowrap可以使其不换行。 近日有此需要,但发现加上nowrap在某些情况下还是会换行!无奈,没有一个...
【引子】在开发的过程中,表格Table有个缺陷,如果一行中某个单元格的超过一行,表格就不够美观了。下面的代码解决了这个问题:当表格被载入的时候,TD的宽度是原定的长 度,不会撑开TD,也不会影响其他TD,点击某...
aspose.words 控件可以方便的出来word文档,通过在word模板中定义书签,可以在指定的位置插入内容,如果需要在word中插入表格,并且表格中含有多行行头,需要合并单元时,就稍微麻烦一些,必须要注意设置单元格的...
table数据相同时合并单元格,原理:逐行进行比较,相同时隐藏第二行,对第一行添加rowspan 【table数据相同时合并单元格,原理:逐行进行比较,相同时隐藏第二行,对第一行添加rowspan】
vue-easytable合并单元格,文档包括ftl文件及对应的js
1、core-renderer.jar该jar包修改过中文不换行问题 public static String getConversionHtmlCode(String linkcss,String htmlCode,String title){ String css = ""; css +="<style>"; css +="table{"; ...
Vxe Table/Grid 单元格分组合并
利用js合并table相同内容单元格并js方式自动生成,把文本内容复制进js中,应该就知道大概咋用了
element ui el-table 动态改变 单元格 的颜色, 将el-table 包在自定义组件(page_table)里面,可以重复使用。
主要介绍了JS实现动态修改table及合并单元格的方法,结合完整实例形式分析了JS动态遍历及修改table单元格的具体操作技巧,需要的朋友可以参考下
在jsp、html页面中实现table表格按列合并相同数据行单元格代码,可实现功能为:在一个table表格中,合并指定列中所有相同数据相邻行单元格内容。
LayUiTable表单相同参数的单元格合并,可以几个列一起合并,注释相应完善。LayUiTable表单相同参数的单元格合并