关于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,但是他们的列需要对齐,也就是说分开画的,然后设 ...
随机推荐
- 老李推荐：第8章3节《MonkeyRunner源码剖析》MonkeyRunner启动运行过程-启动AndroidDebugBridge 3
首先它通过查找JVM中的System Property来找到"com.android.monkeyrunner.bindir"这个属性的值,记得前面小节运行环境初始化的时候在mon ...
- 老李分享： Oracle Performance Tuning Overview 翻译下
1.2性能调优特性和工具 Effective data collection and analysis isessential for identifying and correcting perfo ...
- python 语句：条件、循环、break、continue...
1. 条件语句 执行条件:判断条件"成立时(非零),则执行后面的语句,而执行内容可以多行,以缩进来区分表示同一范围. [Python程序语言指定任何非0和非空(null)值为true,0 或 ...
- Bootstrap基础学习(二)—表单
一.表单 1.基本格式 <!-- 基本格式 --> <form> <div class="form-group"> <label>姓 ...
- ML(4): NavieBayes在R中的应用
朴素贝叶斯方法是一种使用先验概率去计算后验概率的方法, 具体见上一节. 算法包:e1071 函数:navieBayes(formule,data,laplace=0,...,subset,na.act ...
- java 基础知识二 基本类型与运算符
java 基础知识二 基本类型与运算符 1.标识符 定义:为类.方法.变量起的名称 由大小写字母.数字.下划线(_)和美元符号($)组成,同时不能以数字开头 2.关键字 java语言保留特殊含义或者 ...
- React+Redux学习笔记：React+Redux简易开发步骤
前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...
- IOS 程序运行过程
第一次写有点小紧张 希望大家多多指教! 主要讲讲程序从点击运行到结束这个过程中后面的代码都有哪些变化. 首先先了解一下UIApplication.UIApplication的核心作用是提供IOS运行 ...
- 用eclipes 添加jboss tools中的hibernate tool进行反向工程生成数据库对应的BOJO（Javabean）
用eclipes 添加jboss tools中的hibernate tool进行反向工程生成数据库对应的BOJO(Javabean) 安装: 在help中eclise marksplace中查询JBo ...
- Linux - 进程间通信 - 命名管道
1.命名管道的特点: (1)是管道,可用于非血缘关系的进程间的通信 (2)使用命名管道时,梁金成需要用路径表示通道. (3)命名管道以FIFO的文件形式存储于文件系统中.(FIFO:总是按照先进先出的 ...