table表格宽带width属性研究

今天在开发过程中有利用到table中的width属性，涉及百分比和像素，由于对width内部属性的不明确，导致表格的数据展示不完美，闲下来自己捣鼓，所以才有这份研究，仅作为个人成长记录，以及提供参考

PS:图比较多，不想看图的直接跳到最后看结论。

情况分析：

1.在table设置width值固定的情况下，不考虑字符宽带带来的影响：

①如果td width之和不超过table width值（代码如下）：

<table border="2" style="width:800px"><tr><td width="200px">a</td><td width="300px">a</td><td width="100px">a</td></tr>
</table>

①的效果图如下：

结论：td会自动填充补齐table width。

②如果td width之和超过table width值（代码如下）：

<table border="2" style="width:800px"><tr><td width="400px">a</td><td width="200px">a</td><td width="400px">a</td></tr>
</table>

②的效果图如下：

结论：td会自动按比例缩减以满足table width。

2.在table设置width值固定的情况下，加上考虑字符宽带带来的影响：

①如果td width之和不超过table width值，字符超过td width限制但不超过table width限制（代码如下）：

<table border="2" style="width:500px"><tr><td width="240px">a</td><td width="20px">aaaaaaaaaaaaaaaaaaaaaaaaaa</td><td width="240px">a</td></tr>
</table>

②如果td width之和不超过table width值，字符超过td width限制同时也超过table width限制（代码如下）：

<table border="2" style="width:500px"><tr><td width="240px">a</td><td width="20px">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td><td width="240px">a</td></tr></table>

③如果td width之和超过table width值，字符超过td width限制但不超过table width限制（代码如下）：

<table border="2" style="width:500px"><tr><td width="300px">a</td><td width="20px">aaaaaaaaaaaaaaa</td><td width="300px">a</td></tr>
</table>

④如果td width之和超过table width值，字符超过td width限制并且超过table width限制（代码如下）：

<table border="2" style="width:300px"><tr><td width="300px">a</td><td width="20px">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td><td width="300px">a</td></tr>
</table>

①的效果图如下：

②的效果图如下：

③的效果图如下：

④的效果图如下：

结论：td会优先满足字符需求，如果字符宽度超过规定宽度，会变大适应字符大小，压缩其他td以满足table width。如果字符大小不仅超过td width大小还超过table width大小，会撑大表格自适应字符大小，并压缩其他td仅保持最小字符需求，字符需求>table width >td width.

3.在table设置width值不固定为自动的情况下，综合多个影响因素：

①如果td width之和不超过屏幕像素值，字符超过td width限制（字符不超过td width限制情况参上）

代码如下：

<table border="2" style="width:auto"><tr><td width="300px">a</td><td width="20px">aaaaaaaaaaaaaaa</td><td width="300px">a</td></tr>
</table>

②如果td width之和超过屏幕像素值，字符超过td width限制（代码如下）：

<table border="2" style="width:auto"><tr><td width="3000px">a</td><td width="20px">aaaaaaaaaaaaaaa</td><td width="3000px">a</td></tr>
</table>

③如果td width之和超过屏幕像素值，字符不超过td width限制（代码如下）：

<table border="2" style="width:auto"><tr><td width="3000px">a</td><td width="3000px">aaaaaaa</td><td width="3000px">a</td></tr>
</table>

①的效果图如下：

②的效果图如下：

③的效果图如下：

结论：在table width： auto的情况下，auto情况下最多像素只能达到屏幕大小，所以优先满足屏幕大小需求，在不超过屏幕大小的情况下依旧优先满足字符需求。

4.探究table width设置100%与auto与设置具体值大小的区别，在超过屏幕大小的情况下，代码区分如下：

//table width:100%的情况：<table border="2" style="width:100%"><tr><td width="3000px">a</td><td width="3000px">aaaaaaa</td><td width="3000px">a</td></tr>
</table>
//table width:AUTO的情况：
<table border="2" style="width:auto"><tr><td width="3000px">a</td><td width="3000px">aaaaaaa</td><td width="3000px">a</td></tr>
</table>

table width值大于屏幕宽度的情况：

<table border="2" style="width:5000"><tr><td width="3000px">a</td><td width="3000px">aaaaaaa</td><td width="3000px">a</td></tr>
</table>

效果区分图如下：从上到下分别是100%，auto，具体值

结论：在超出屏幕大小的情况下auto与100%无区别，具体值将会满足具体值大小，用进度条拉长屏幕满足数据显示（如图三）；在不超出屏幕大小的情况下auto自动适应大小，100%依旧自适应占满屏幕，具体值满足具体值大小。

5.探究table width以及设置百分比与像素的情况，代码区分如下：

//table width:百分比的情况：（td百分比不满100%的情况）<table border="2" style="width:50%"><tr><td width="20%">a</td><td width="20%">aaaaaaa</td><td width="40%">a</td></tr>
</table>//table width:百分比的情况：（td百分比满100%的情况）<table border="2" style="width:50%"><tr><td width="20%">a</td><td width="20%">aaaaaaa</td><td width="60%">a</td></tr>
</table>//table width:像素的情况：（td像素不等于table像素的情况）
<table border="2" style="width:200px"><tr><td width="300px">a</td><td width="300px">a</td><td width="300px">a</td></tr>
</table>//table width:像素的情况：（td像素等于table像素的情况）
<table border="2" style="width:200px"><tr><td width="100px">a</td><td width="50px">aaaaaaa</td><td width="50px">a</td></tr>
</table>

由于图太多不上效果图了，直接上结论

结论：td百分比不满100%和td百分比满足100%的情况下，都满足统一共同特性，都按照比例分配，table width百分比是根据父元素在这也就是屏幕的相对值，像素同理，在满足table像素的情况下，按照比例区分分配空间。table width > td width

·有兴趣的人还可以研究一下字符大小多少对像素的影响，还有table边框border对width影响。

致歉：看到这里的人，你受苦了，想必能看到这里的人，肯定也是跟我一样无聊的人了，说实话我写到这里，自己都开始骂自己笨蛋SB了，可就是喜欢这种蠢蠢的感觉，想必以后自己再回来看这篇无聊文的时候会笑出猪叫声来吧，直接上最终结论吧

最终结论：在宽度调节上：字符需求>table width >td width.

在屏幕调节宽度上：table width 具体值 >table width 100% > table width auto(自适应)

在使用上：table width具体值是死的，不考虑字符需求的情况下可能不太方便用于数据不统一的情况下展示，table width百分比 同理，auto情况下比较好，但是由于数据的变化性可能导致表格的不好看，可能会出现没有填充满的效果

table表格宽带width属性研究相关推荐

html5语言在tr下下拉列表,5-HTML列表， table表格标签及其属性-Go语言中文社区
一.有序列表 (ordered list) 格式: 有序列表有序列表有序列表语义及运用: 给一堆数据添加列表语义,数据有先后之分.常运用于歌单,排行榜等需要列出先后顺序的列表. 注意点: 1. ...
Table中width属性研究
下面分几种情况看看width属性对实际展示效果的影响(情况有很多种,我这里只是挑选常见的几种来分析研究) 1.table的width超过td的width之和 <table border=&quo ...
table 表格的一些属性
将一定的内容按特定的行.列规则进行排列就构成了表格.无论在日常生活和工作中,还是在网页设计中, 表格通常都可以使信息更容易理解.HTML 具有很强的表格功能,使用户可以方便地创建出各种规格的表格, 并 ...
html中表格元素的英文,HTML中表格元素TABLE,TR,TD及属性的语法
table:表格元素及属性属性说明 width 表格宽度,单位为%或象素 border 表格边框线的粗细 cellspacing 表格间距 cellpadding 表格边距 ...
formn 表单 table表格
form表单 form 标签是用于指定表单数据的提交方式和地址.它有以下几个属性: 1: name :用于指定表单的名称,方便后续提交使用 2: id :表单的唯一名称,一般用于提交或 ...
element-ui 设置table表格单元格背景样式
在table表格绑定call-style属性,声明一个方法就可以设置样式了: <el-table border stripe height="76vh" v-loading= ...
antd table表格选中每行设置背景色
1.文档显示,table表格中有rowClassName属性 Table 参数 --------------------------------- 说明------------------------ ...
php中td的属性设置,html table表格是什么？table标签中各种属性的使用方法
html table表格是什么? 首先让我们了解什么是表格,还有表格的作用什么是table表格:由一些被称之为单元格的矩形框按照从左到右从上到下的顺序排列到一起组成的 table表格的作用:以 ...
table表格的定义及常用属性
<table ...
HTML中table表格的常用标签及属性
table表格的常用标签及属性 <table border="1" cellspacing="0" cellpadding="5"&g ...

table表格宽带width属性研究

table表格宽带width属性研究相关推荐

最新文章

热门文章