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

 我来答

4个回答

#合辑# 面试问优缺点怎么回答最加分？

百度网友e68692953
推荐于2018-03-26 · 超过25用户采纳过TA的回答

知道答主

回答量：61

采纳率：83%

帮助的人：14万

我也去答题访问个人页

关注

展开全部

简单的办法就是把宽度设置为百分比，任何分辨率都适应了

已赞过 已踩过<

评论收起

美橙互联

广告2024-12-02

美橙建站系统是新一代网站建设神器。功能强大，操作简单，网站按需定制，建站无需代码，自由拖拽，低成本快速建站。

www.cndns.com

殷简贝乐欣
2019-07-08 · TA获得超过3687个赞

知道大有可为答主

回答量：3072

采纳率：34%

帮助的人：424万

我也去答题访问个人页

关注

展开全部

WEB应用的页面，表格的表现形式是常常遇到的，在列数有限的前提下，如何将各列中的内容自适应到不同分辨率的屏幕，这应该是一个比较容易遇到的问题，下面就来谈一谈我对这类问题的解决与看法。
将所有列设置为固定宽度，显然是不能满足此类要求的，但是若把全部的列都设置为百分比，恐怕在某些尺寸，或分辨率下，会变得很难看。在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不再被内容撑出适合的高度。
例：
<table
width="95%"
border="1"
cellpadding="2"
cellspacing="1"
style="table-layout:fixed;">
……
</table>
此方法适用于IE与FireFox浏览器。

已赞过 已踩过<

评论收起

育知同创教育
2016-08-10 · 百度知道合伙人官方认证企业

育知同创教育

1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】

向TA提问

关注

展开全部

网友们上网通常会采用800×600、1024×768两种分辨率，由于网页不是用来给自己看的，所以我们必须让自己的网页能够兼顾这两种情况，让不同分辨率设置的网友都能够看到一个排版美观正确的网页。
一、 自然拉伸
如果你的网站结构没有用到大量的图形来衔接，主要由表格来定结构，那么你就可以使用该方法。非常适用于主要由表格、文字来表达信息的简单的网页页面。制作表格时，只要你把表格的宽度属性定义为100% 
，表格就会根据分辨率的不同自行调整宽度。
二、 固定居中

在800×600分辨率下制作的网页在1024×768分辨率的机器上打开，整个网页就会跑到左边；1024×768分辨率的网页在800×600分辨率的机器上有时也会变得"不堪入目"。两种分辨率各做一个吧？做起来费劲。所以目前普遍采用的方法是固定居中法！

现在大多数网民都还在用800*600的分辨率，所以我们一般可以以此分辨率为主。只要在网页原代码的<body>后紧加一句<center>，</body>前加一句</center>就OK了。不过有几个问题这是要注意一下，第一个要注意的是上面说到的百分比的问题，表格、单元格的宽度单位最好要使用像素单位，而不要用百分比。例如width=770。如果你的表格宽度设的是百分比，那么使用大于800×600的像素时，网页就会拉宽，这样网页可能会变形。在<body>中加入leftmargin=0，即<body 
leftmargin=0>这种情况下，800×600支持的表格宽度为780像素时不会出现滚动条。还有一点要注意的是不能用DW中的层来定位。
三、 兵分两路
如果你的网页不经常更新，而且对页面效果极其在意，那好，你就设计两个页面，分别对应800×600和1024×768两种分辨率。然后根据不同的分辨率进行跳转就行了。

例如：

<script LANGUAGE="JavaScript">
function redirectPage() {
var 
url_else = 
var 
url_800x600 = 
var 
url_1024x768 = ";
var url_1366x768 
=
if ((screen.width == 
800) && (screen.height == 600))
window.location.href= url_800x600;
else if ((screen.width == 1024) && 
(screen.height == 768))
window.location.href= 
url_1024x768;
else if ((screen.width == 1366) && (screen.height == 
768))
window.location.href= 
url_1366x768;
else

window.location.href= 
url_else;
}
</script>


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起