情况1:下面代码定义了表格宽带为为600px,未设置td宽带,3个td内容为1,2,3,可以看到3个内容平分table的宽度。

也就是每个td都是200px(请注意:如果用chrome调试宽度,会有一定的误差,因为600px还包括边框,因此实际宽度可能是198px,这里进行了简化,下同)。

 <table style="width:600px; background-color:red" >
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr> </table>

接下来,修改第一个td的内容,将1修改为11,则结果变成如下:

因为:第一个单元格的“11”是2个字符宽带,第二个单元格“2”是一个字符宽带,第三个单元格“3”是一个字符宽带。

共计是4个字符宽带,因此,比例为 2:1:1. 所以 第一个单元格是:600*2/4=300px. 第2和第3都是 600*1/4=150px宽度

如果第一个内容过长,默认会称高表的高度,而不是延长表的高度(可以通过在td里放置div来延长宽度,见本文最后),

如下图,表格已经定义为600px,第一个td内容已经大于600px

此时,表格并不会让宽大于600px,td会通过换行来显示td内容。其余各单元格仍然按内容的比例同分table宽度。

下图显示,单元格1和单元格2均分表格剩余宽度。

总之,一个结论:如果不设置td宽带,各单元格会根据各个内容长度的比例来均分table的宽度。

情况2:

定义的表格宽带为600,但是第一和第三的宽度之和已经大于600px了。

此时,系统会先计算第二个实际的宽度,假设第二个是40px,然后第一和第三再按比例均分剩余宽度。

 <table style="width:600px; background-color:blue" >
<tr>
<td width="400px"> 1 </td>
<td >
222222
</td>
<td width="400px">3</td>
</tr> </table>

情况3:如果td宽度不足,则不足会自动补齐。下图中,第一个100px,第三个200px,第二个td自然是:600-100-200=300px

<table style="width:600px; background-color:blue" >
<tr>
<td width="100px"> 1 </td>
<td >
222222
</td>
<td width="200px">3</td>
</tr> </table>

情况4:百分比和数字同时使用,百分比优先级高

  <table style="width:600px; background-color:blue" >
<tr>
<td width="200px"> 1 </td>
<td width="50%" >
2
</td>
<td width="200px">3</td>
</tr> </table>

上面代码计算td2宽带有两种方法:(1)因为td1是200,td3是200px,td2则是600-200-200=200,在计算50%,则td2的宽带应该是 100px

(2)td2的50%是table的一半,所以,td2的宽带是300. 然后td1和td3按比例1:1均分剩余的300,那么哪个计算是正确的呢?

运行一下,效果如下,第二个方法是正确的。

情况5:

   <table style="width:600px; background-color:blue" >
<tr>
<td width="100px">
<div style="width:400px">
1
</div>
</td>
<td >
2
</td>
<td>3</td>
</tr> </table>

虽然td定义的是100px,但是里面的div设置为400px,也就是说,如果td内容是纯文本,超过100px会在td里换行

但是,如果td里div设置了宽度,则会撑宽td的默认值。

结论:td定义的宽带是默认宽度,实际宽度由内容决定。

table表格宽带研究(附带:table表格为什么设置td宽度无效)的更多相关文章

  1. 新的表格展示利器 Bootstrap Table

     1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...

  2. 新的表格展示利器 Bootstrap Table Ⅱ

        上一篇文章介绍了Bootstrap Table的基本知识点和应用,本文针对上一篇文章中未解决的文件导出问题进行分析,同时介绍BootStrap Table的扩展功能,当行表格数据修改. 1.B ...

  3. layui table动态表头 改变表格头部 重新加载表格

    改变头部原理: 删除原来表格, 重新建立DOM元素, 重新加载table,实现表头改变 明白了原理, 我相信大家都能写出来了, table.reload(ID, options)目前好像还不支持con ...

  4. 新的表格展示利器 Bootstrap Table Ⅰ

     1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...

  5. html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式

    先上代码   <script type="text/javascript" language="javascript">   var idTmr; ...

  6. 关于Bootstrap Table使用生成冻结窗格的表格

    参考资料 : <JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案> <http://issues.wenzhixin.net.cn/bootst ...

  7. table表格整体居中 和 table表格中各行各列内容居中

    1.table表格整个居中<div style="text-align: center;"> <table border="1" style= ...

  8. layui静态表格固定td宽度,table固定td宽度

    正在做一个项目,要求数据表的列是不固定的,有可能是有10列,有可能是20列,第一列宽度要固定,然后我怎么设置都没有用, 这个问题困扰了我三天,后来终于百度到了, 这个博客: https://www.c ...

  9. table样式测试总结tr td宽度分析

    题外话:一直以来习惯布局用ul,li样式调整比较方便,不会互相影响出现一些问题,but~现在公司涉及很多表格打印,都是用table写的,好多宽度高度合并啊,组合啊~~~,单元格之间互相影响,有的样式设 ...

随机推荐

  1. C/C++语言的一些精简归纳

    前言:本想直接写个关于OC语言,但觉得还是要说下C先. 先语言特性 C是面向过程的,没有类和对象概念,也就没有什么封装(这个?).继承.多态等特性. 而且是是中级语言,其编译过程包括:预编译(incl ...

  2. 如何正确接收 GitHub 的消息邮件

    背景 我厂的开发流程通常都是基于 GitHub 的.在 GitHub 上 review 代码,也是我日常工作的重要组成部分.对我来说,在 code review 过程中最讨厌的莫过于,我在 pull ...

  3. 代码中修改组件的margin属性

    LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams( ViewGroup.LayoutParams.WRAP_ ...

  4. caffe 安装在win 7 vs2015 无gpu的安装方式-是无法安装 的

    网上多数是vs2012或者vs2013上安装方式,带NA-显卡的需要安装CUDA7.5,安装cuDNN4,cuDNN. 一 :下载caffe源码(microsoft版) 下载地址:https://gi ...

  5. JavaScript-join连接符

    1.转字符串:2种 1.将数组中每个元素都转为字符串,再用逗号分隔:var str=String(arr); 2.将数组中每个元素都字符串,再用自定义下标连接每个元素 var str=arr.join ...

  6. 套题 bestcoder 84

    A题:Aaronson 静下心来观察就会发现1.如果m大于等于n的位数,那么n直接写成二进制形式就是最优解形式2.如果m小于n的位数,那么贪心地使得高位尽可能地多消掉n的值,因为高位少写一个数就意味着 ...

  7. 多重背包问题:悼念512汶川大地震遇难同胞——珍惜现在,感恩生活(HDU 2191)(二进制优化)

    悼念512汶川大地震遇难同胞——珍惜现在,感恩生活 HDU 2191 一道裸的多重背包问题: #include<iostream> #include<algorithm> #i ...

  8. SQL Server优化器特性-隐式谓词

    我们都知道,一条SQL语句提交给优化器会产生相应的执行计划然后执行输出结果,但他的执行计划是如何产生的呢?这可能是关系型数据库最复杂的部分了.这里我为大家介绍一个有关SQL Server优化器的特性- ...

  9. Win2012R2的一个Bug---安装群集后可能引发的软件崩溃问题及相应补丁

    如标题,笔者查阅资料发现微软声称安装故障转角色后就可能发生上述描述问题,但不止于SSMS崩溃.建议使用win2012R2的朋友安装补丁. 笔者在部署win2012R2+Sql2014 cluster时 ...

  10. 鸟瞰Nodejs

    一,基础. 1,Node的包管理器:npm; 安装node环境时会自动安装. 本地模式获取一个包:npm install [package_name] 此时包被安装到当前木的node_modules子 ...