关于html表格单元格宽度的计算规则
* { margin: 0; padding: 0 }
body { background: #fafafa }
ul,li { list-style: none }
h1 { margin: 20px 0 }
h2 { margin: 15px 0 }
h3 { margin: 10px 0 }
p { margin: 5px 0; border-left: 5px solid #ddd; padding-left: 10px }
.grid { width: 100% }
.tb-fixed { table-layout: fixed }
.txt-mark { font-size: 14px; font-weight: normal; color: #666 }
table { width: 100%; border-collapse: collapse }
th,td { line-height: 18px; padding: 6px 5px; border: 1px solid #ccc; text-align: center; overflow: hidden; white-space: nowrap }
th { background: #efefef }
td { background: #fff }
.tb-demo2 .col1 { width: 50px }
.tb-demo2 .col2 { width: 50px }
.tb-demo2 .col3 { width: 50px }
.tb-demo2 .col4 { width: 50px }
.tb-demo2 .col5 { width: 50px }
.tb-demo2 .col6 { width: 50px }
.tb-demo2 .col7 { width: 50px }
.tb-demo2 .col8 { width: 50px }
.tb-demo2 .col9 { width: 50px }
.tb-demo2 .col10 { width: 50px }
.tb-demo3 .col1 { width: 150px }
.tb-demo3 .col2 { width: 150px }
.tb-demo3 .col3 { width: 150px }
.tb-demo3 .col4 { width: 150px }
.tb-demo3 .col5 { width: 150px }
.tb-demo3 .col6 { width: 150px }
.tb-demo3 .col7 { width: 150px }
.tb-demo3 .col8 { width: 110px }
.tb-demo3 .col9 { width: 110px }
.tb-demo3 .col10 { width: 120px }
.tb-demo4 .col1 { width: 150px; background: #999 }
.tb-demo4 .col2 { width: 150px; background: #999 }
.tb-demo4 .col3 { width: 150px; background: #999 }
.tb-demo4 .col4 { width: 150px; background: #999 }
.tb-demo5 .col1 { width: 150px; background: #999 }
.tb-demo5 .col2 { width: 150px; background: #999 }
.tb-demo5 .col3 { width: 150px; background: #999 }
.tb-demo5 .col4 { width: 150px; background: #999 }
.tb-demo5 .col5 { width: 150px; background: #999 }
.tb-demo5 .col6 { width: 150px; background: #999 }
.tb-demo5 .col7 { width: 250px; background: #999 }
.tb-demo7 .col1 { min-width: 50px }
.tb-demo7 .col2 { min-width: 50px }
.tb-demo7 .col3 { min-width: 50px }
.tb-demo7 .col4 { min-width: 50px }
.tb-demo7 .col5 { min-width: 50px }
.tb-demo7 .col6 { min-width: 50px }
.tb-demo7 .col7 { min-width: 50px }
.tb-demo7 .col8 { min-width: 50px }
.tb-demo7 .col9 { min-width: 50px }
.tb-demo7 .col10 { min-width: 50px }
.tb-demo8 .col1 { min-width: 50px }
.tb-demo8 .col2 { min-width: 50px }
.tb-demo8 .col3 { min-width: 50px }
.tb-demo8 .col4 { min-width: 50px }
.tb-demo8 .col5 { min-width: 50px }
.tb-demo8 .col6 { min-width: 50px }
.tb-demo8 .col7 { min-width: 50px }
.tb-demo8 .col8 { min-width: 50px }
.tb-demo8 .col9 { min-width: 50px }
.tb-demo8 .col10 { min-width: 50px }
.tb-demo9 .col1 { min-width: 50px; background: #999 }
.tb-demo9 .col2 { min-width: 50px; background: #999 }
.tb-demo9 .col7 { min-width: 50px; background: #999 }
.tb-demo9 .col8 { min-width: 50px; background: #999 }
.tb-demo9 .col10 { min-width: 50px; background: #999 }
.tb-demo10 .col1 { min-width: 50px; background: #999 }
.tb-demo10 .col2 { min-width: 50px; background: #999 }
.tb-demo10 .col7 { min-width: 50px; background: #999 }
.tb-demo10 .col8 { min-width: 50px; background: #999 }
.tb-demo10 .col10 { min-width: 50px; background: #999 }
关于html表格单元格宽度的计算规则
表格单元格宽度的计算方式主要分为两种方式：固定表格布局、自动表格布局，这个经常写css的人应该还是知道的，但是我们经常会发现给表格列定了宽度不起作用，又或是没有定宽度渲染出来的却是正常的吗，下面就来介绍下这两个方式具体是怎么计算渲染的。
先设定几个通用的变量：
- tableWidth=表格宽度=100%
- tableBorderWidth=表格左右边框宽度
- tdBorderWidth=所有列左右边框宽度和（合并的边框算1px）
- tdPadding=所有列左右内填补和
- tdWidth=所有定义了width的列的宽度和
- tdLength=列个数
一、固定表格布局，表格添加table-layout:fixed
ps：在固定表格布局中，表格列的宽度与列内容多少无关，只与表格宽度、列宽度、表格左右边框、列左右边框、列左右内填补有关
通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格，即只有第一行的宽度才会起作用
width为auto的列的宽度（即未定义width的列的宽度,如果计算结果为负数则为0）= (tableWidth-tableBorderWidth-tdBorderWidth-tdPadding-tdWidth)/tdLength
1、所有th宽度未定义
每列的宽度通过表格宽度平均分配
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|---|---|---|---|---|---|---|---|---|
| row1row1row1row1row1row1row1row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5row5row5row5row5row5row5row5 | row6 | row7row7row7row7row7row7row7row7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 |
2、所有th都定了宽度，同时所有列宽度之和小于表格宽度（tableBorderWidth+tdBorderWidth+tdPadding+tdWidth <= tableWidth）
每列的宽度通过总宽度平均分配；表格的宽度为其定义的宽度
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|---|---|---|---|---|---|---|---|---|
| row1row1row1row1row1row1row1row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5row5row5row5row5row5row5row5 | row6 | row7row7row7row7row7row7row7row7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 |
3、所有th都定了宽度，同时所有列宽度之和大于表格宽度（tableBorderWidth+tdBorderWidth+tdPadding+tdWidth > tableWidth）
每列的宽度为自身定义的宽度;表格的宽度为所有列宽度总和（会超出表格定义的宽度）
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|---|---|---|---|---|---|---|---|---|
| row1row1row1row1row1row1row1row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5row5row5row5row5row5row5row5 | row6 | row7row7row7row7row7row7row7row7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 |
4、部分th定了宽度，同时定了th宽度的列的宽度之后小于表格宽度（tableBorderWidth+tdBorderWidth+tdPadding+tdWidth <= tableWidth）
ps:深灰色背景的列为定义了宽度的列
定义宽度的列的宽度为自身定义的宽度，其他没有定义宽度的列的宽度为表格总宽度减去定义的宽度之和再平均分配
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|---|---|---|---|---|---|---|---|---|
| row1row1row1row1row1row1row1row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5row5row5row5row5row5row5row5 | row6 | row7row7row7row7row7row7row7row7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 |
5、部分th定了宽度，同时定了th宽度的列的宽度之后大于表格宽度（tableBorderWidth+tdBorderWidth+tdPadding+tdWidth > tableWidth）
ps:深灰色背景的列为定义了宽度的列
定义宽度的列的实际宽度为自身定义的宽度，其他没有定义宽度的列的宽度为表格总宽度减去定义的宽度之和再平均分配，平均分配后的宽度小于零，则其它没有定义宽度的列的宽度为0
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|---|---|---|---|---|---|---|---|---|
| row1row1row1row1row1row1row1row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5row5row5row5row5row5row5row5 | row6 | row7row7row7row7row7row7row7row7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 |
二、自动表格布局，表格设置table-layout:auto（该属性默认值就是auto）
每个列的宽度由单元格中没有折行的最宽的内容设定的，此种算法有时候会很慢，这是由于它需要在确定最终的布局之前访问表格中所有的列
1、所有th都未定最小宽度
每一列的宽度完全由里面的内容所决定。
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|---|---|---|---|---|---|---|---|---|
| row1row1row1row1row1row1row1row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5row5row5row5row5row5row5row5 | row6 | row7row7row7row7row7row7row7row7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 |
2、所有th都定义了最小宽度，根据内容计算的所有列之和小于表格宽度
每列宽度首先根据内容计算，同时不能小于定义的最小宽度，多余的宽度每一列上面平均分配点。
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|---|---|---|---|---|---|---|---|---|
| row1 | row2row2row2row2row2row2row2row2 | row3 | row4 | row5 | row6 | row7 | row8 | row9 | row10 |
3、所有th都定义了最小宽度，根据内容计算的所有列之和大于表格宽度
每列宽度首先根据内容计算，其次不能小于定义的最小宽度
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|---|---|---|---|---|---|---|---|---|
| row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5 | row6row6row6row6row6row6row6row6 | row7 | row6row6row6row6row6row6row6row6 | row9 | row10row10row10row10row10row10row10 |
4、部分th定义了最小宽度，根据内容计算的所有列之和小于表格宽度
ps:深灰色背景的列为定义了最小宽度的列
每列宽度首先根据内容计算，其次不能小于定义的最小宽度，最后表格渲染出来的宽度不能小于表格自身定义的宽度。
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|---|---|---|---|---|---|---|---|---|
| row1 | row2 | row3 | row4row4row4row4row4row4row4row4 | row5 | row6 | row7 | row6 | row9 | row10 |
5、部分th定义了最小宽度，根据内容计算的所有列之和小于表格宽度
ps:深灰色背景的列为定义了最小宽度的列
每列宽度首先根据内容计算，其次不能小于定义的最小宽度
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|---|---|---|---|---|---|---|---|---|
| row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5 | row6row6row6row6row6row6row6row6 | row7 | row6row6row6row6row6row6row6row6 | row9 | row10row10row10row10row10row10row10 |
关于html表格单元格宽度的计算规则的更多相关文章
- colgroup中col定义表格单元格宽度
colgroup中可以使用col来定义表格单元格宽度,可以使用像素(数字),百分比,我们来具体看看有什么不同. 先看一个最基本的:用像素(数字)表示,因为table有个宽度,这里表示占比 <ht ...
- CSS开发技巧(二）：表格合并边框后的单元格宽度计算
前言: 分离边框模型和合并边框模型是表格的两种模型,它通过以下属性确定: border-collapse:separate(默认值) | collapse | inherit 当采用分离边框模型时,表 ...
- Easyui datagrid 设置内容超过单元格宽度时自动换行显示
datagrid 设置内容超过单元格宽度时自动换行显示 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 单元格内容超过单元格宽度不会自动化换行.如下 ...
- Bootstrap：Bootstrap_table第一篇：快速用bootstrap_table（支持参数）筛选并展示数据，固定表格前几列，实现表格单元格编辑
1.准备好css和js文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr ...
- 关于.net Microsoft.Office.Interop.Word组建操作word的问题，如何控制word表格单元格内部段落的样式。
控制word表格单元格内部文字样式.我要将数据导出到word当中,对于word表格一个单元格中的一段文字,要设置不同的样式,比如第一行文字作为标题要居中,加粗,第二行为正常的正文. 代码如下 publ ...
- JavaScript动态改变表格单元格内容的方法
本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格 ...
- EXCEL表格单元格中包含数字英文和汉字，如何自动去掉汉字，保留英文和数字
EXCEL表格单元格中包含数字英文和汉字,如何自动去掉汉字,保留英文和数字 Function 求数字和字母(对象 As String) '在文本与数字混杂中提取数字和字母 Dim myReg ...
- VBA表格单元格替换文字
Sub 表格单元格替换文字() If MsgBox("确定要替换单元格的文字吗?", vbYesNo + vbQuestion) = vbYes Then To ActiveDoc ...
- firefox ie chrome 设置单元格宽度 td width 有bug,不能正常工作。以下方式可以解决
1. firefox ie chrome 设置单元格宽度 td width 有bug,不能正常工作. 如果是上面一行 和下面一行是分别属于两个table,但是他们的列需要对齐,也就是说分开画的,然后设 ...
随机推荐
- 玩转SSH（五）：Struts + Spring + MyBatis（注解版）
本文将在 玩转SSH(四):Struts + Spring + MyBatis 的基础上进行一些小的改动,将原本是 xml 配置方式的项目,改成注解的配置方式. 要将项目改成注解方式,一般是将在 Sp ...
- 6.Redis常用命令：Set
在Redis中,我们可以将Set类型看作为没有排序的字符集合,和List类型一样,我们也可以在该类型的数据值上执行添加.删除或判断某一元素是否存在等操作.需要说明的是,这些操作的时间复杂度为O(1), ...
- js动弹特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 空a标签 a标签空的情况下 IE6 IE7下点击无效
最近做了好多网站专题页面,因为专题页面图片较多,个别banner上有1个到多个按钮,一种是用“图解img标签的usemap”的方法做链接,(图解img标签的usemap使用方法)[传送门] 另一种用则 ...
- Kindle PaperWhite3 越狱和PDF插件的安装
下载所需工具 这里分享的文件是这个教程中所需要的所有文件 所有工具下载链接:http://pan.baidu.com/s/1c249P2S 密码:ozc7 一.准备工作 本越狱方法仅适用于 KO.KV ...
- mac双系统用磁盘工具合并windows分区后，开机还会 出现win分区
如何删除开机硬盘的选择项 打开终端,输入sudo mount -t msdos /dev/disk0s1 /mnt 在Finer中会出现EFI盘,删除其中的Apple文件以外的文件即可(Apple千万 ...
- js中计算两个日期之差
js中计算两个日期之差 var aBgnDate, aEndDate; var oBgnDate, oEndDate; var nYl ...
- 使用vs2015搭建Asp.net Core
准备工具 1.首先得安装vs2015 并且升级至 update3及以上 2.安装.net core sdk.附上官网下载地址 http://www.microsoft.com/net/down ...
- Spark SQL数据加载和保存实战
一:前置知识详解: Spark SQL重要是操作DataFrame,DataFrame本身提供了save和load的操作, Load:可以创建DataFrame, Save:把DataFrame中的数 ...
- placeholder各种浏览器兼容问题
只要在页面上引入placeholder.min文件,再以$('input,textarea').placeholder(); 就可以兼容ie等各种浏览器. placeholder.min.js文件链接 ...