HTML table 自适应宽度
JyLie 2022-12-28 HTMLcss
# 前言
使用 table 全宽展示表单内容时，table 自适应宽度很容易使人困惑。面对不同分辨率的屏幕，如何更巧妙的适配不同终端呢？下面记录一下基本思路。
# 定宽有限列
将所有列设置为固定宽度，显然是不能满足此类要求的，但是若把全部的列都设置为百分比，恐怕在某些尺寸，或分辨率下，会变得很难看。
常规操作是，在表格列数不是很多的前提下，将大部分列宽用固定值设置死，留下 一列 不设置宽度，将 table 的宽度设置为屏幕的百分比（譬如 95%、98%等）。
譬如如下：
<table cellpadding="2" cellspacing="2" width="95%">
<tr>
<td width="50px" nowrap>序号</td>
<td width="150px" nowrap>分类A</td>
<td width="150px" nowrap>分类B</td>
<td width="200px" nowrap>名称</td>
<td nowrap>说明</td>
<td width="100px" nowrap>操作</td>
</tr>
<tr>
<td width="50px" nowrap>序号ｘｘ</td>
<td width="150px" nowrap>分类AＭＫ／ｓ</td>
<td width="150px" nowrap>分类B－－————－－ＭＳＭＳＭＳＭＳＭＳＭＳＭＳＭ</td>
<td width="200px" nowrap>名称</td>
<td nowrap>xx</td>
<td width="100px" nowrap>操作</td>
</tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
上述 Demo 中，名为 “说明” 的列，内容比较长，个人认为可以将此列设置为浮动宽度列，用以自适应页面的宽度。
但是当该表格中出现长度比列幅宽的 半角字符 时，td 的宽度会被内容撑破，应该如何解决呢？
最简单的方式是：在含有 半角字符 的行的 td 中，设置样式 <td align="left" width="150px" style="word-wrap:break-word;"></td>，这样做可以使半角连续字符 强制换行，不至于撑破列宽。
应用此方法，针对设置了 width 宽度 的 td 列 可以解决，但是如果没有设置宽度的 td 列，是无法生效还是会被撑破 td 的，应该如何解决呢？
# table-layout:fixed;
当 table 的 td列 没设置定宽时，在 table 设置样式 table-layout:fixed;，可以使半角连续字符强制换行，不至于撑破列宽。
需要注意的是，使用此参数后，不要轻易在 tr(行) 或 td(列) 中加入 height 属性，否则会使 table 不再被内容撑出适合的高度。
<table style="table-layout:fixed;">
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16