HTML页⾯⾃适应宽度的table（表格）
WEB应⽤的页⾯，表格的表现形式是常常遇到的，在列数有限的前提下，如何将各列中的内容⾃适应到不同分辨率的屏幕，这应该是⼀个⽐较容易遇到的问题，下⾯就来谈⼀谈我对这类问题的解决与看法。将所有列设置为固定宽度，显然是不能满⾜此类要求的，但是若把全部的列都设置为百分⽐，恐怕在某些尺⼨，或分辨率下，会变得很难看。⽐较习惯于⽤如下的⽅式来处理——在表格列数不是很多的前提下——将⼤部分列宽⽤固定值设置死，留下⼀列不设置宽度，将table的宽度设置为屏幕的百分⽐（譬如95%、98%等）。
例：
<table width="95%" border="1" cellpadding="2" cellspacing="1">
<tr>
<td width="50px" nowrap>序号</td>
html网页设计 table
<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中，追加，这样做可以使半⾓连续字符强制换⾏，不⾄于撑破列宽。
例：
<td align="left" width="150px" >
……
</td>
应⽤此⽅法，针对设置了width宽度的td列可以解决，但是如果没有设置宽度的td列，是⽆法⽣效还是会被撑破td的，应该如何解决呢？
解决此问题的⽅法是：在定义表格时，追加，这样做可以使半⾓连续字符强制换⾏，不⾄于撑破列宽。需要注意的是，使⽤此参数后，不要轻易在tr(⾏)或td(列)中加⼊height属性，会使table不再被内容撑出适合的⾼度。
例：
<table width="95%" border="1" cellpadding="2" cellspacing="1" >
……
</table>
此⽅法适⽤于IE与FireFox浏览器。
到此这篇关于HTML页⾯⾃适应宽度的table(表格)的⽂章就介绍到这了，更多相关table⾃适应宽度内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。