HTML中有关表格及tr td元素宽高的解读


HTML中有关表格及tr td元素宽高的解读

?相信各位在做网页使用表格的时候总会遇到表格宽高度不怎么按常理出牌的问题，以下将根据个人的经验结合案例解读table中各种其奇怪怪的宽高问题。本文试验在谷歌浏览器开展。

表格布局

?表格布局实际是一种显示表格单元格、行、列的算法规则，对应的css属性是table-layout，其常用的值有两个：1.auto(自动表格布局) 2.fixed(固定表格布局)。默认采取的是自动表格布局，不同表格布局生成的表格效果是不同的

进入正题之前，我们有必要了解几个概念。

  • 表格宽度
  • 列宽度
  • 表格边框宽度
  • 单元格间距

建立长宽均为200px的两行三列边框宽度为1的表格

1
2
3
4
5
6
7
8
9
10
11
12
<table border="1" height="200" width="200"   >
    <tr >
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

图示讲解：
在这里插入图片描述
先知：哪怕将单元格宽度设为0，单元格的占宽也不会是0，而是有一个基础值，约摸为总宽度的2%左右

设置单元格的宽度时，最好是用百分比的方式分配，且最好使得单元格总宽度占比为1。

其他情况，根据该单元格行宽度占比分配单元格宽度。（20+40）/100*行内容宽 数值并非完全一致，因为有折优算法存在，会在微小范围偏差 若总占比大于1， 只要后续还有

存在，哪怕宽度为0，也会占据总宽度2%左右。（至此，所有的td都还没填充数据的，都只是按照预设宽高度渲染而成）

1
2
3
4
        <tr >
                <td width="20%"></td>
                <td width="40%"></td>
        </tr>

自动表格布局

在自动表格布局中，列的宽度是由当前列所有单元格中最宽的内容宽度决定的。如果单元格内容的宽度大于设置的宽度，那么就会无视设置宽度，拉伸了表格的宽度。

如果某行中的单元格设置了高度，则会选取当前行最高的那个高度作为当前行高，若总行高也大于表格预设高度，则拉伸表格高度。

总而言之：在自动表格布局中，表格的宽高是可以改变的，其决定因素在于单元格的内容的宽高

1
2
3
4
5
6
7
8
9
10
11
12
<table border="1" height="100" width="200" >
            <tr >
                <td width="100" height="150">CCC</td>
                <td width="60" height="200">AAAAAAAAAAAAAAAAAAAAA</td>
                <td width="40"></td>
            </tr>
            <tr>
                <td ></td>
                <td></td>
                <td>BBBBBBBBBBBBBBBBBBBBBB</td>
            </tr>
        </table>

效果图如下：
在这里插入图片描述
此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。

固定表格布局

固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。

通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。并且它只接受第一行的宽度设定，设置的如果是像素值，那么将根据各个单元格宽度的像素值渲染表格列宽，与单元格具体内容宽度无关；如果设置的是百分比，那么表格的总宽度就是表格预设宽度

在固定表格布局中，表格的宽是不变的，而高度是可变的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table height="200" width="200" border="1" style="table-layout:fixed;word-break: break-all;  word-wrap:break-word;">
                    <tr>
                        <td width="100">AAAAAAAAAAAAAAA</td>
                        <td width="100">BBBBBBBBBBBBBBB</td>
                        <td width="50">CCCCCCCCCCCCCCCCCCCCCCCCCCCC</td>
                    </tr>
                    <tr>
                        <td  title="DDDDDDDDDDDDDDDDDDDDDDDDD">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</td>
                        <td>5</td>
                        <td>6</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>8</td>
                        <td>9</td>
                    </tr>
                </table>

效果图如下：
在这里插入图片描述

让单元格内容省略并悬浮提示

1.先删除上述代码中的 word-break: break-all; word-wrap:break-word;
2.加一段css

1
2
3
<style type="text/css">
        td{text-overflow : ellipsis;overflow:hidden}
    </style>

3.给td 添加title属性

注意：
text-overflow : ellipsis生效的前提：
overflow不为visible，最好是类似hidden的值
需要指定table的width

效果图：
在这里插入图片描述

动态设置td的宽度不起效？

那是因为你没设置table的表格布局为固定布局，而是采用默认布局
解决方法有二：
1.往td里面塞一个设置宽高的的div即可，直接设置td.style.width是不起效果的

1
2
3
4
5
6
7
let td = document.createElement("td")

let div = document.createElement("div")
div.style.width = "32px"
div.style.height = "32px"
td.appendChild(div)
tr.appendChild(td)

2.设置table的表格布局为固定布局，那么td.style.width就生效了

1
<table  style="table-layout:fixed">