关于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,但是他们的列需要对齐,也就是说分开画的,然后设 ...
随机推荐
- android开发用无线网络进行Android开发中的调试
1.手机具有root权限 2.安装adbWireless1.5.4.apk (下面有下载地址) 3.敲入命令:adb connect 192.168.1.127 后面是手机的IP地址 打开eclip ...
- 修改数据库用户名--CMD环境执行有效
--CMD环境执行有效 --修改数据库用户名 select * from user$ where name='aa'; update user$ set name='bb' where name ...
- (iOS)关于@property和@synthesize的理解(原创)
开始学习ios的时候,就对一些objc的语法不理解,就比如@property和@synthesize,之前都是记住然后照着用,但是写的代码多了,对objc和ios有了一些理解,再加上最近用MRC,所以 ...
- Mybatis基础学习(三)—映射文件
一.输入映射 1.parameterType 指定输入参数的Java类,可以使用别名或者类的全限定名.它也可以接受基本数据类型.POJO对象.HashMap. (1)基本数据类型 (2 ...
- 转载---关于Spring的69个面试问答
链接:http://www.importnew.com/11657.html 目录 Spring概述 依赖注入 Spring Beans Spring注解 Spring的对象访问 Spring面向切面 ...
- 用C写一个web服务器（三） Linux下用GCC进行项目编译
.container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px } .conta ...
- Android 代码库（自定义一套 Dialog通用提示框 ）
做Android开发五年了,期间做做停停(去做后台开发,服务器管理),当回来做Android的时候,发现很生疏,好些控件以前写得很顺手,现在好像忘记些什么了,总要打开这个项目,打开那个项目 ...
- jquery easyui的datagrid在初始化的时候会请求两次URL？
我们项目前端用的是jquery easyui,刚开始使用datagrid加载列表初始化时总是请求两次URL,这让人非常不解,怎么总是请求两次呢?数据一多,加载速度明显变慢,通过查资料才知道原来是重复声 ...
- [进程管理]Linux进程状态解析之R、S、D
Linux是一个分时操作系统,能够在一个cpu上运行多个程序,每个被运行的程序实例对应一个或多个进程,这里介绍一下Linux进程状态. Linux是一个多用户,多任务的系统,可以同时运行多个用户的多个 ...
- file_get_contents url
file_get_contents (PHP 4 >= 4.3.0, PHP 5) file_get_contents — 将整个文件读入一个字符串 说明¶ string file_get_co ...