html固定单元格位置,固定表格布局

在CSS trick上看到这篇关于表格布局的文章，还没了解过这个属性，读下来感觉挺有用的，会英文的朋友欢迎阅读原文：fixed table layouttable{ table-layout:fixed;}

默认的table-layout是auto，布局看起来很奇怪，当内容和长度超出表格宽度时，则会撑出来。当外层宽度小于表格内容时，则会出现滚动条。

table-layout:fixed布局则看起来更加的友好的。

使用这个fixed的布局是基于第一行，通过设置他们的宽度，接下来的内容都是跟随着变化的。

几点优点

内容可以通过CSS overflow:hidden;和text-overflow:ellipsis;来隐藏

超出内容在一个td内可以通过设置overflow:auto来滚动查看。

当缩小网页的窗口时，表格不会因为内容而撑出来，而是在设定的比例内隐藏，可用于自适应设计中

使用案例

上面的标题当超出规定的宽度时会自动隐藏起来，不会撑出来。

实际的HTML和CSS

IDNameJobEmail

0001Johnny FiveRobotin'need@input.com0002Super SuperlonglastnamesmithDoin' stuffdoing@stuff.com

CSS代码：

.users {

table-layout: fixed;

width: 100%;

white-space: nowrap;

}

.users td {

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

/* Column widths are based on these cells */

.row-ID {

width: 10%;

}

.row-name {

width: 40%;

}

.row-job {

width: 30%;

}

.row-email {

width: 20%;

}

See the Pen xFcrp by Chris Coyier (@chriscoyier) on CodePen.

布局速度

这种使用fixed的布局，由于不需要计算表格的宽度，可能是最快的。

邮件方面

table-layout这个属性是跨浏览器的。

扩展阅读

表格用得最多的是数据列表，不适合用于网页布局。在Bootstrap前端开发框架，发现一个就是按钮自适应长度使用到了table-layout:fixed这个CSS。具体使用跟下面这个案例类似：

html固定单元格位置,固定表格布局相关推荐

计算机表格设置宽度,word表格大小调整固定单元格大小设置——想象力电脑应用...
在前面的课程中,我们讲解了创建表格(四种创建表格的方法)和表格的基本操作(选择表格.插入与删除行或列.删除单元格.删除整张表格以及合并与拆分单元格)的方法,这里,我们接着介绍表格大小的设置. 当我们创 ...
网格布局(固定单元格间隔，单元格、容器大小不定)布局使用
官方案例为 auto-fill 固定单元格,容器不定的使用延申为固定单元格间隔,单元格.容器大小不定)布局使用代码如下固定间隔为 10px 单元格最小值为200px 容器不定 ...
php文章表格固定行,怎么固定单元格第一行
固定单元格第一行的方法:首先打开Excel表格,并在第一行输入需要固定置顶的内容:然后选中excel表格第一行需要置顶的内容:接着在"开始"的功能界面中靠右边找到"冻结窗 ...
Excel表中进行算术运算的时候固定单元格操作
在使用Excel表格进行运算的时候固定某一个单元格,往往就是算乘法或者一些算术运算的时候,有些值是始终不变的,但是算术中的每一项中也有可变项. 举个例子:每个人每门课的成绩乘上每门课的学分,最终除以总 ...
python提取Excel多个sheet中固定单元格数据
有个Excel,里面有多个sheet,现在需要把每个sheet中固定单元格的数据提取出来例如我的这个表格,每个月都有一个这样的表格,然后一共12个sheet存放了12个月的数据,现在我把每个shee ...
锁定td的高度_如何固定单元格的高度
目标固定单元格的高度,不随内容的增多而撑开,只显示固定的行数,多余的内容忽略实现方式在 td 内容的外层包一个 span,并设置 span 的最大高度(max-height),追加 overfl ...
6.9对一个工作簿中的所有工作表分别求和并将求和结果写入固定单元格
# 对一个工作簿中的所有工作表分别求和并将求和结果写入固定单元格 import xlwings as xw import pandas as pd app = xw.App(visible=False ...
html中表格怎么合并单元格居中,word表格怎么合并单元格居中
在excel中,合并.拆分单元格是经常会用到的.而在word文档中,偶尔我们也需要插入表格,然后编辑表格,那么如何对word中的表格单元格进行合并.拆分呢? 一.如何在word中创建表格 1.选择&q ...
UItableview5--移动单元格位置
//添加一个代理方法,用来响应单元格的删除事件func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell ...

html固定单元格位置,固定表格布局

html固定单元格位置,固定表格布局相关推荐

最新文章

热门文章