如何设置table的宽度自适应

table中添加样式 style="width:100%;"，有用请采纳；//用样式比较规范；
<table style="width:100%;background-color:#00f;border:1px solid #f00;">
<tr>
<td>如何设置HTML页面自适应宽度的table</td>
</tr>
</table>
1
2
3
4
5

<table style="width:100%;background-color:#00f;border:1px solid #f00;">
<tr>
<td>如何设置HTML页面自适应宽度的table</td>
</tr>
</table>

页面自适应屏幕的方法（以下字母及标点为专业代码）：

无论是电脑还是手机，要做到自适应屏幕，其实都是一样的。

首先，在网页代码的头部，加入一行viewport标签 <meta name="viewport" content="width=device-width, initial-scale=10, maximum-scale=10, minimum-scale=10, user-scalable=no" /> viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为10，即网页初始大小占屏幕面积的100%。即让viewport的宽度等于物理设备上的真实分辨率，不允许用户缩放。

其次：

网页宽度css一定要使用百分比width: xx%;，不能用绝对像素。

当然可以用width:auto;

第三，流动布局 left{float: left;width: %;}

第四，选择加载css 这是自适应的关键部分 abc{ height:300px; border:1px solid #000; margin:0 auto}  @media screen and (min-width: 1201px) {  abc {width: 1200px}   }  / 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 /    @media screen and (max-width: 1200px) {  abc {width: 900px}   }  / 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 /    @media screen and (max-width: 901px) {  abc {width: 200px;}   }  / 设置了浏览器宽度不大于901px时 abc 显示200px宽度 /    @media screen and (max-width: 500px) {  abc {width: 100px;}   }  / 设置了浏览器宽度不大于500px时 abc 显示100px宽度 /  需要注意是CSS代码顺序，由大到小排版CSS（判断浏览器宽度越大越放前），这样是因为逻辑关系，@media 判断CSS排错将导致判断失效。

第四，自适应 img { max-width: 100%;} 老版本的IE不支持max-width，所以只好写成：img { width: 100%; }

第五、采用相对字体大小 字体也不能使用绝对大小（px），而只能使用相对大小（em）。 这里最重要的，是第三条和第四条，也就是采用流动布局和css选择加载。

方法一：按住ctrl键然后在滑动鼠标，向下滑是缩小，向上滑是放大。
方法二：点击浏览器的“页面缩放”，在移动到相应的比例就好。
方法三：浏览器现在设置里都有一个选项是适应屏幕。点击适应屏幕即可自动适应当前页面大小。

将所有列设置为固定宽度，显然是不能满足此类要求的，但是若把全部的列都设置为百分比，恐怕在某些尺寸，或分辨率下，会变得很难看。在Bigtree看来，比较习惯于用如下的方式来处理——在表格列数不是很多的前提下——将大部分列宽用固定值设置死，留下一列不设置宽度，将table的宽度设置为屏幕的百分比（譬如95%、98%等）。 例：<table width="95%" border="1" cellpadding="2" cellspacing="1"><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>……</table>在本例中，名为“说明”的列，内容比较长，个人认为可以将此列设置为浮动宽度列，用以自适应页面的宽度。 但是当该表格中出现长度比列幅宽的半角字符时，td的宽度会被内容撑破，应该如何解决呢？解决此问题的方法是：在明细行的td中，追加style="word-wrap:break-word;"，这样做可以使半角连续字符强制换行，不至于撑破列宽。 例：<td align="left" width="150px" style="word-wrap:break-word;">……</td>应用此方法，针对设置了width宽度的td列可以解决，但是如果没有设置宽度的td列，是无法生效还是会被撑破td的，应该如何解决呢？解决此问题的方法是：在定义表格时，追加style="table-layout:fixed;"，这样做可以使半角连续字符强制换行，不至于撑破列宽。需要注意的是，使用此参数后，不要轻易在tr(行)或td(列)中加入height属性，会使table不再被内容撑出适合的高度。 例：效果图

---