Table中width属性研究

下面分几种情况看看width属性对实际展示效果的影响（情况有很多种，我这里只是挑选常见的几种来分析研究）

1.table的width超过td的width之和

<table border="1" style="width:900px">
   <tr>
      <td width="100px">我很正常</td>
      <td width="200px">我很正常</td>
      <td width="300px">我很正常</td>
   </tr>
</table>

可以看到table的宽度保持不变，td会按照各自width的值近似等比例的缩放来填充table的宽度。

2.table的width小于td的width之和

<table border="1" style="width:500px">
   <tr>
      <td width="100px">我很正常</td>
      <td width="200px">我很正常</td>
      <td width="300px">我很正常</td>
   </tr>
</table>

可以看到table的宽度保持不变，td会按照各自width的值近似等比例的缩放来适应table的宽度

3.当有的字段内容过长时

<table border="1" style="width:600px">
   <tr>
      <td width="100px">我很长长长长长长长长长长长长长长长长长长</td>
      <td width="200px">我很正常</td>
      <td width="300px">我很正常</td>
   </tr>
</table>

td的宽度不足以放得下内容时，文本内容会自动换行显示，td的宽度保持不变（antd也是这样显示的），但是这样可能会导致行高参差不齐，看上去不太美观

4.当有的字段内容过长且td不换行时

td{
white-space: nowrap;
}

可以看到table的宽度保持不变，第一列宽度扩充为文本的宽度，后两列近似按比例缩放以适应table的宽度

5.当td的width不设值，即为auto时

<table border="1" style="width:600px">
   <tr>
      <td>我很长长长长长长长长长长长长长长长长长长</td>
      <td>我很正常</td>
      <td>我很正常</td>
   </tr>
</table>

可以看到table的宽度保持不变，td的宽度近似按照td中内容的宽度等比例分配

6.当td的宽度部分不设值时

<table border="1" style="width:600px">
   <tr>
      <td width="100px">我很长长长长长长长长长长长长长长长长长长</td>
      <td width="200px">我很正常</td>
      <td>我很正常</td>
   </tr>
</table>

可以看到table的宽度保持不变，第一列自动扩充为文本宽度，第二列保持自己所设的width值，第三列自适应为剩余宽度；

当剩余宽度不够放下文本内容时，

<table border="1" style="width:600px">
   <tr>
      <td width="100px">我很长长长长长长长长长长长长长长长长长长</td>
      <td width="200px">我很正常</td>
      <td>我稍微有点点长</td>
   </tr>
</table>

可以看到table的宽度保持不变第三列填充为自身文本宽度，同时第二列缩放为剩余宽度。

综合上述几种情况，可以看到td的宽度会根据实际的内容长度和table的宽度来进行动态调整的。

结合实际应用，再说说最近使用的antd的组件，列属性中有个width的属性，如果每列均不配置width属性的话，则是按照上一节中分析的第5种情况，及按照每列的内容来调整每列的宽度，如下图所示：

这样可以让table自己根据内容来自适应调整每列的宽度，

而当需要表头固定时，则要求需要指定 column 的 width 属性，否则列头和内容可能不对齐。

这是因为这种情况表头和表格内容分属于两个不同的table

这样就会导致按照各自的内容去自适应产生合适的每列宽度，由于表头和表体的内容不一致，就会导致每列的宽度不一致，也就是展示出来的不对齐，因此要指定width值，这样表头和表体就会按照相同的比例来分配，这样每列的宽度也就一样了，也就对齐了。

如果每列都设置width的话，就会整体按比例缩放，参照上一节第1和第2种

如果最后一列不设置width的值的话，如antd官方实例中那样，那就参照上一节中第3种（antd中内容过长会自动换行）和第6种情况

设置了width的列实际宽度为设置的值，最后一列会根据table的宽度自适应调整。

知道table中width属性对显示的影响后，不同情况下的展示效果也就都能解释的通了。

Table中width属性研究相关推荐

html中visibility属性,（CSS）不同浏览器对table中visibility属性显示的不同
本文举例说明在不同浏览器对table中visibility属性显示的不同. 一.HTML代码 thth tdtd 二.不同浏览器的表示选取了Chrome.FireFox.Edge.IE11分别测试, ...
CSS3中width属性的width: calc(100% - 20px); 使用问题
目的是动态改变宽度/高度的变化,适配问题. width: calc(100% - 20px); css3 的 calc()函数. 这里的意思是设置宽度比100%的宽度少20px. calc()函数用于 ...
php中td的属性设置,html table表格是什么？table标签中各种属性的使用方法
html table表格是什么? 首先让我们了解什么是表格,还有表格的作用什么是table表格:由一些被称之为单元格的矩形框按照从左到右从上到下的顺序排列到一起组成的 table表格的作用:以 ...
html width字符数,HTML pre标签 width 属性
HTML 标签 width 属性定义和用法 HTML5 不支持 width 属性.请使用 CSS 代替. 在 HTML 4.01 中, 的 width 属性已废弃. width 属性规定每行的最大 ...
HTML中Table标签的属性及应用
我们如何使用table表格: 定义表格:<table></table> 创建表头:<th></th> 创建表行:<tr></tr> ...
css中 Span 元素的 width 属性无效果原因及多种解决方案
先运行下程序看下: <span style='background-color:#336699;width:300px;'>123</span> 输出:123 可以看到 spa ...
HTML中在table的td属性中嵌套table，为什么table居中？
我在表格table的td中又嵌套了一个table,但是table中的东西会呈现垂直居中的状态,那么问题是什么,是其table继承了vertical-align: inherit属性 vertical- ...
html中table设置字体,table的默认属性及css字体
前几天一直忙着敲代码,没有时间整理内容今天上了关于position的使用,position属性有五个值 1.inherit 从父元素继承 position 属性的值. 2.static 默认值.没有 ...
ajax拿table里的th值,Jquery Ajax 异步设置Table中某列的值
可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...

Table中width属性研究

Table中width属性研究相关推荐

最新文章

热门文章