如何为网页设计自适应的表单?

2022-11-09 10:33 解决方案
WEB应用的页面,表格的表现形式是常常遇到的,在列数有限的前提下,如何将各列中的内容自适应到不同分辨率的屏幕,这应该是一个比较容易遇到的问题,下面就来谈一谈我对这类问题的解决与看法。

[div]

1、自适应宽度:

[div][div]

td {

[div]

宽度:1px

空白:nowrap/*自适应宽度*/

分词:keep-all;/*避免截断长词,保留所有长词*/

}

[div]

2小公司网站优化,自适应高度

[div][div]

表格{

[div]

表格-布局:固定;

宽度:100%;

}

[div]

将所有列设置为固定宽度显然无法满足这样的要求,但如果将所有列都设置为百分比,恐怕在某些大小或分辨率上会很难看。在Bigtree看来,习惯了以下几种方式——在表格列数不大的前提下——将大部分列的宽度设置为固定值,留下一列没有宽度,将表格的宽度设置为屏幕的百分比(如95%、98%等。).

[div]


示例:

& lt表格cellpadding="2" cellspacing="1 " >

& lt;tr & gt

& lt;td nowrap & gt序列号

& lt;td nowrap & gt分类a

& lt;td nowrap & gtb类

& lt;td nowrap & gt名称

& lt;td nowrap & gt描述

& lt;td nowrap & gt操作

& lt;/tr & gt;

……

& lt/table & gt;

[div]

在本例中,名为“Description”的列有很长的内容。我个人觉得这个栏目可以设置成浮动宽度栏目来适应页面的宽度。

[div][div]

但当表格中出现长度大于列宽的半角字符时,td的宽度会被内容打断。应该怎么做?


这个问题的解决方案是:add style = " word-wrap:break-word;"到详图线的td。,这样可以在不破坏列宽的情况下强制换行半角连续字符。

[div][div]

[div]

[/div]示例:

[/div]& lt;td & gt

……

[/div]& lt;/TD & gt;

[div]

用这个方法,对于设置了宽度的td列是可以求解的,但是如果没有设置宽度的td列,就无效或者td会被打破。应该如何解决?


解决这个问题的方法是:在定义表格时,追加style = " table-layout:fixed;",这样可以在不破坏列宽的情况下强制换行半角连续字符。需要注意的是,深圳网站制作设计公司在使用该参数后,不要轻易在tr (row)或td (column)中添加height属性,这样会使表格不再被内容支持到合适的高度。

[div][div]

[div]

[/div]示例:

& lt;tablecellpadding = " 2 " cellspacing = " 1 " & gt;

……

& lt;/table & gt;

微信与项目经理沟通

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

阅读
上一篇:android页面跳转和切换的方式
下一篇:如何创建博客_如何创建博客_如何创建个人博客