表格单元格宽度的强制固定与网页对屏幕分辩率的自适应

今天,在完善一个原来项目的过程中,实现了两个想法:一个是表格单元格宽度的强制固定,另一个是网页对屏幕分辨率的自适应。下面分别介绍一下。

一、表格单元格宽度的强制固定

曾经碰到一个非常头疼的问题:一个table拆分为两个后,如何让两个table中的各个列精确对齐,看起来如同一个表。

这个问题,初想起来是蛮简单的:只要给两个table都添加相同的一堆<col>不就行了?

但实际操作起来却发现存在这样的问题:表格会根据单元格中填充内容的多少自动调整表格。

后来,我尝试着将table的各列的宽度直接作为行内style进行定义,结果也一样,表格仍然自动调整。

这里不再详述问题的解决过程。将几点重要经验分享给大家:

1、单元格的溢出处理
[css]
table{
width:1000px;
table-layout:fixed;
}
td{
overflow:hidden;
text-overflow:ellipsis;
}
[/css]

2、根据框模型,仔细分析宽度组成。这里重点观察:width是否如你所想的,包含了border、padding等。

小技巧:很多浏览器自带调试工具,用调试工具进行查看能发现意想不到的问题!

二、网页对屏幕分辩率的自适应

此项目要求在不同分辨率的屏幕上具有较为严格的一致性。这里给出解决思路供大家参考。

1、头部HEAD
[html]


[/html]
2、为要求的每种分辨率分别创建一个css文件

这些文件中只包含各分辨率下不同的部分,相同部分放在style.css中。

命名方式参考:style_pack_1920_1080.css, style_pack_1024_768.css。

3、利用js进行css文件引入控制

给出jquery代码:
[javascript]
function ajust_to_screen(){
var width = parseInt( $(‘body’).css(‘width’) );
var css_pack_file;
switch( width ){
case 1024:
css_pack_file = ‘style_pack_1024_768.css’;
break;
case 1920:
css_pack_file = ‘style_pack_1920_1080.css’;
break;
default:
css_pack_file = ‘style_pack_1920_1080.css’;
break;
}
$(‘style_pack’).attr( ‘href’, css_pack_file );
}
[/javascript]



发表评论

邮箱地址不会被公开。