关于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,但是他们的列需要对齐,也就是说分开画的,然后设 ...
随机推荐
- JavaScript基础学习(一)—JavaScript简介
一.JavaScript概述 JavaScript是一种专为与网页交互的脚本语言,由三部分组成. ECMAScript 核心,提供核心语言功能. BO ...
- ElasticSearch 基本概念
Elasticsearch是一个接近实时的搜索平台,就是说从索引一个文档直到这个文档能够被搜索到有一个轻微的延迟,通常是一秒钟 集群 一个集群通常有一个或多个elasticsearch节点组成,给这些 ...
- filter滤镜的使用
刚开始学css,开始遇到filter不懂什么意思后来到网上查了,觉得解释的很全面,就把它抠下来,以便自己经常来看看. CSS滤镜的使用方法:filter:filtername(parameters) ...
- Spring-data-redis操作redis知识汇总
什么是spring-data-redis spring-data-redis是spring-data模块的一部分,专门用来支持在spring管理项目对redis的操作,使用java操作redis最常用 ...
- ios UIImagePickerController简单说明
首先,VC中添加#import <MobileCoreServices/MobileCoreServices.h> 使用(NSString *) kUTTypeImage定义在其中 判断是 ...
- 第五章 HQL实用技术
第五章 HQL实用技术5.1 使用HQL查询语句(面向对象查询语句) 5.1.1 编写HQL语句 5.1.1.1 from子句 例:fr ...
- 初识ElasticSearch
概述 Elasticsearch是一个基于Apache Lucene(TM)的开源搜索引擎.无论在开源还是专有领域,Lucene可以被认为是迄今为止最先进.性能最好的.功能最全的搜索引擎库. 分布式的 ...
- IOS 私有变量 私有属性的书写方法
一.早期只能定义在.h文件中.用@private 关键字来定义私有变量. @interface ViewController{ @private Bool _isBool; } @end 二.允许在. ...
- Amazon Alexa登录授权（Android）
访问Alexa的API,必须要携带AccessToken,也就是必须要登录授权,本文主要记录Amazon Alexa在Android平台上的登录授权过程. 一.在亚马逊开发者平台注册应用 进入亚马逊开 ...
- 腾讯云无法绑定公网IP问题解释与解决方案。
http://blog.csdn.net/chenggong2dm/article/details/51475222 解释:公网IP并不直接配置在服务器上,而是在服务器外部的路由上,通过某种映射连接. ...