自适应表格代码(自动适应表格)

本文目录：

• 1、如何设置HTML页面自适应宽度的table(表格)（一）
• 2、div 自适应表格列宽度
• 3、html里面 要自适应表格行数 比如手机端一行可以显示3格 pc端一行显示5格 根据设备的宽度 怎么实现呢
• 4、求助，图片放进html表格里怎样才能填满
• 5、jsp表格宽度自适应

如何设置HTML页面自适应宽度的table(表格)（一）

!DOCTYPE html

html

head

meta charset=”UTF-8″

title自适应宽度的table/title

style type=”text/css”

table{

  table-layout: fixed; 

  border-collapse: collapse;

  width: 100%;

}

/style

/head

body

   table border=”1″

   tr

     thHeader/th

     thHeader/th

     thHeader/th

   /tr

   tr

     tdData/td

     tdData/td

     tdData/td

   /tr

   tr

        tdData/td

        tdData/td

        tdData/td

      /tr

   /table

/body

/html

div 自适应表格列宽度

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浏览器。

html里面 要自适应表格行数 比如手机端一行可以显示3格 pc端一行显示5格 根据设备的宽度 怎么实现呢

设置自适应宽度一般都是需要把他们的width设置为百分比，你可以测试一下，或者发你的网址来我给你测试一下；

但是这样设置只能让表格来自适应还需要考虑到表格内容来自适应，举个例子来说吧：如下

用@media screen来根据浏览器的宽度判断

@media screen and (max-width:360px){body,input,select{font-size:12px}}

意思是：当浏览器的宽度小于360px时，文字大小12像素

反过来讲一样：@media screen and (min-width:360px){body,input,select{font-size:15.75px}}

当浏览器的宽度大于360px的时候就是15.75px文字大小，这样的话，表格里面的内容就可以完整的显示；

具体的代码还需要你自己来写；

求助，图片放进html表格里怎样才能填满

图片放进html表格里怎么样才能填满，这个问题有点不完整啊，本身table有默认有2px宽度距离的，是你table没有把边框类设置成0，还是说本身你的table就是固定大小而满呢，还是说图像自适应表格的宽度大小呢？介于你提的问题，我做以下分析。

1、将table边框都设置成0，宽度和高度都不显示，自适应图像大小：

border=”0″（边框为0）、cellpadding=”0″（填充为0）、cellspacing=”0″（间距为0）

代码如下所示：

table border=”0″ cellpadding=”0″ cellspacing=””

    tr

        tdimg src=”” //td

    /tr

/table

图示如下：

2、将table的宽度固定（500宽度），图像自适应表格大小（图像设置宽度100%），代码如下：

table width=”500″

    tr

        tdimg src=”” width=”100%” //td

    /tr

/table

图示如下：

希望我的回答能令你满意！

jsp表格宽度自适应

一、 自然拉伸

如果你的网站结构没有用到大量的图形来衔接，主要由表格来定结构，那么你就可以使用该方法。非常适用于主要由表格、文字来表达信息的简单的网页页面。制作表格时，只要你把表格的宽度属性定义为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两种分辨率。然后根据不同的分辨率进行跳转就行了。

本文来源：https://www.yuntue.com/post/144451.html | 云服务器网，转载请注明出处！