如何设置HTML页面自适应宽度的table

发布网友 发布时间：2022-03-24 00:24

我来回答

共3个回答

热心网友 时间：2022-03-24 01:53

网友们上网通常会采用800×600、1024×768两种分辨率，由于网页不是用来给自己看的，所以我们必须让自己的网页能够兼顾这两种情况，让不同分辨率设置的网友都能够看到一个排版美观正确的网页。一、自然拉伸如果你的网站结构没有用到大量的图形来衔接，主要由表格来定结构，那么你就可以使用该方法。非常适用于主要由表格、文字来表达信息的简单的网页页面。制作表格时，只要你把表格的宽度属性定义为100%，表格就会根据分辨率的不同自行调整宽度。二、固定居中在800×600分辨率下制作的网页在1024×768分辨率的机器上打开，整个网页就会跑到左边；1024×768分辨率的网页在800×600分辨率的机器上有时也会变得"不堪入目"。两种分辨率各做一个吧？做起来费劲。所以目前普遍采用的方法是固定居中法！现在大多数网民都还在用800*600的分辨率，所以我们一般可以以此分辨率为主。只要在网页原代码的后紧加一句，前加一句就OK了。不过有几个问题这是要注意一下，第一个要注意的是上面说到的百分比的问题，表格、单元格的宽度单位最好要使用像素单位，而不要用百分比。例如width=770。如果你的表格宽度设的是百分比，那么使用大于800×600的像素时，网页就会拉宽，这样网页可能会变形。在中加入leftmargin=0，即这种情况下，800×600支持的表格宽度为780像素时不会出现滚动条。还有一点要注意的是不能用DW中的层来定位。三、兵分两路如果你的网页不经常更新，而且对页面效果极其在意，那好，你就设计两个页面，分别对应800×600和1024×768两种分辨率。然后根据不同的分辨率进行跳转就行了。例如：

热心网友 时间：2022-03-24 03:11

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

热心网友 时间：2022-03-24 04:46

如果网站结构主要由表格来定结构，那么只要把表格的宽度属性定义为100%，表格就会根据分辨率的不同自行调整宽度。内部的小表格也同样用百分比进行设置即可。