微信与项目经理沟通
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
如何为网页设计自适应的表单？
2022-11-09 10:33 解决方案
WEB应用的页面，表格的表现形式是常常遇到的，在列数有限的前提下，如何将各列中的内容自适应到不同分辨率的屏幕，这应该是一个比较容易遇到的问题，下面就来谈一谈我对这类问题的解决与看法。
[/div]示例: [/div]示例:
[div]
宽度:1px1、自适应宽度:
[div][div]
td {
[div]
空白: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]& lt；td & gt
……
[/div]& lt；/TD & gt；
[div]
用这个方法，对于设置了宽度的td列是可以求解的，但是如果没有设置宽度的td列，就无效或者td会被打破。应该如何解决？
解决这个问题的方法是:在定义表格时，追加style = " table-layout:fixed；"，这样可以在不破坏列宽的情况下强制换行半角连续字符。需要注意的是，深圳网站制作设计公司在使用该参数后，不要轻易在tr (row)或td (column)中添加height属性，这样会使表格不再被内容支持到合适的高度。
[div][div]
[div]
& lt；tablecellpadding = " 2 " cellspacing = " 1 " & gt；
……
& lt；/table & gt；
阅读