HTML页面自适应宽度的table表格

　 短视频，自媒体，达人种草一站处事

这篇文章首要先容了HTML页面自顺应宽度的table(表格),文中通过示例代码先容的很是具体，对各人的进修可能事变具有必然的参考进修代价，必要的伴侣们下面跟着小编来一路进修进修吧

WEB应用的页面，表格的示意情势是经常碰着的，在列数有限的条件下，怎样将各列中的内容自顺应到差异判别率的屏幕，这应该是一个较量轻易碰着的题目，下面就来谈一谈我对这类题目的办理与观点。 将全部列配置为牢靠宽度，显然是不能满意此类要求的，可是若把所有的列都配置为百分比，生怕在某些尺寸，或判别率下，会变得很丢脸。较量风俗于用如下的方法来处理赏罚——在表格列数不是许多的条件下——将大部门列宽用牢靠值配置死，留下一列不配置宽度，将table的宽度配置为屏幕的百分比（譬如95%、98%等）。

例：

<table cellpadding="2" cellspacing="1">
  <tr>
    <td nowrap>序号</td>
    <td nowrap>分类A</td>
    <td nowrap>分类B</td>
    <td nowrap>名称</td>
    <td nowrap>声名</td>
    <td nowrap>操纵</td>
  </tr>
  ……
</table>

在本例中，名为“声名”的列，内容较量长，小我私人以为可以将此列配置为浮动宽度列，用以自顺应页面的宽度。

可是当该表格中呈现长度比列幅宽的半角字符时，td的宽度会被内容撑破，应该怎样办理呢？

办理此题目的要领是：在明细行的td中，追加style="word-wrap:break-word;"，这样做可以使半角持续字符逼迫换行，不至于撑破列宽。

例：

<td>
      ……
    </td>

应用此要领，针对配置了width宽度的td列可以办理，可是假如没有配置宽度的td列，是无法见效照旧会被撑破td的，应该怎样办理呢？

办理此题目的要领是：在界说表格时，追加style="table-layout:fixed;"，这样做可以使半角持续字符逼迫换行，不至于撑破列宽。必要留意的是，行使此参数后，不要等闲在tr(行)或td(列)中插手height属性，会使table不再被内容撑出得当的高度。

例：

<table cellpadding="2" cellspacing="1">
  ……
</table>

此要领合用于IE与FireFox赏识器。

到此这篇关于HTML页面自顺应宽度的table(表格)的文章就先容到这了,更多相干table自顺应宽度内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!