html 表格自适应布局,table自适应布局的一些总结

效果

工作中遇到的自适应表格，实现过程并不顺畅，花费了一些功夫。将其中不熟悉的技术点总结如下，期待下次可以行云流水的做出来。

自适应表格如何实现文本溢出点点的效果

自适应的表格，由于单元格的流动性，文字不存在溢出这样情况，如下图所示：

image.png

如何解决自适应表格内容过多将布局撑乱的情况？

给table标签加如下css声明：

table-layout: fixed;

table-layout作用就是让表格布局固定，使表格的宽度不会根据内容多少而动态变化。

设置了 table-layout：fixed后的效果：

image.png

td不用设置height

单元格内容太多，会出现内容折行限制，将td撑高，所有设置 height 没有意义。

image.png

如何设置td的初始高度

设置 td 初始高度最好用 padding 进行设置，考虑到了单元格被撑开的情况。

可如下设置：

.table td, .table th {

padding: 5px 10px;

}

表格的边框问题

给th、td都设置了border后会出现如下情形：

image.png

如何让表格的边框重叠

给table设置如下css：

table {

border-collapse: collapse;

border-spacing: 0;

}

border-collapse：可以让单元格的之间共享边框

border-spacing：消除单元格之间的间距

html 表格自适应布局,table自适应布局的一些总结相关推荐

alter table add column多个字段_ElementUI表格el-table表头固定自适应高度解决方案
一.前言 ElementUI.iView都以相同的方式提供了表格组件表头固定的方法,即设置组件的height属性.表头固定很重要,就在于当表格数据项很多时,滚动条出现在表格组件内,而不是出现在表格组件 ...
使用负边距创建自适应宽度的流体布局
随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题.目前国内门户很多都进行了改版,采用目前的主流–960px左右的宽度. 我认为 ...
html表格高度自动调整,table表格自适应高度的办法
这篇文章主要为大家详细介绍了table表格自适应高度的办法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 关于自适应高度,361源码在以前给大家介绍过ifram ...
html自适应布局_三分钟学会响应式布局和自适应布局
响应式布局和自适应布局详解响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局. 自适应布局给了你更多设计的空间,因为你只用考虑几种不同的状态.而在响应式布局中你却得考虑上百种不同的 ...
css什么是自适应布局,css 自适应布局阮一峰
转载一篇文章: 自适应网页设计(Responsive Web Design) 作者: 阮一峰移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小 ...
【疯狂积累CSS】2：利用@media screen实现网页布局的自适应
如果文档宽度小于 300 像素则修改背景颜色(background-color): @media screen and (max-width: 300px) {body {background-col ...
静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC
静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...
Android表格布局(Table Layout)
Android表格布局(Table Layout) 先来看布局管理器之间继承关系图: 图1 可知TableLayout继承了LinearLayout,所以表格布局本质上依然是线性管理器. 表格布局采用 ...
利用@media screen实现网页布局的自适应
利用@media screen实现网页布局的自适应优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小.只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽 ...

html 表格自适应布局,table自适应布局的一些总结

html 表格自适应布局,table自适应布局的一些总结相关推荐

最新文章

热门文章