关于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,但是他们的列需要对齐,也就是说分开画的,然后设 ...
随机推荐
- 老李分享：Web Services 特性 1
老李分享:Web Services 特性 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:9 ...
- js动弹特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- windows下修改eclipse的默认编码 转
windows下一般系统编码为 GB2312(中文版的windows), 由于我比较喜欢utf8格式的编码,现将修改方式和大家分享 如果要使新建立工程.java文件直接使UTF-8则需要做以下工作: ...
- boostrap---btn
bootstrap入门教程,按钮.按钮风格.下拉菜单等 本教程演示: bootstrap框架的按钮.按钮大小.按钮风格.按钮组.下拉菜单制作等. 使用的版本:Bootstrap v2.3.2 . 下面 ...
- 跟着刚哥梳理java知识点——面向对象（八）
面向对象的核心概念:类和对象. 类:对一类事物描述,是抽象的.概念上的定义. 对象:实际存在的该类事物的每个个体,因而也成为实例(Instance). Java类及类的成员:属性(成员变量Field) ...
- nginx学习笔记——http module分析
源码:nginx 1.12.0 nginx由于其高性能.扩充性好等特点在迅速走红,越来越多的公司采用nginx作web服务器.负载均衡.waf等 工作,一些基于nginx ...
- 第三章 Docker的镜像
3.1.获取镜像 获取镜像 docker pull name[:TAG] #默认是从网络下载镜像,不指定tag会人下载latest标签下的镜像. 1 2 docker search ubuntu do ...
- （知识点)JavaScript闭包
下面是我对闭包的理解:(把他们整理出来,整理的过程也是在梳理) 1.首先,在理解闭包之前: 我们首先应该清楚下作用域和作用域链 作用域:每个函数定义时创建时自己的环境即作用域 作用域链:函数内可访问自 ...
- EverythingAboutJava
1 GC gabage collection 垃圾回收Java GC系列(1):Java垃圾回收简介 http://mp.weixin.qq.com/s?src=3×tamp=149 ...
- CentOS 7安装Docker
在虚拟机CentOS 7上安装Docker ## 零:检查前提条件: 在Red Hat 和Red Hat系列的Linux发行版中,安装Docker所需的前提提交并不多. ### 1.内 ...