今天，在完善一个原来项目的过程中，实现了两个想法：一个是表格单元格宽度的强制固定，另一个是网页对屏幕分辨率的自适应。下面分别介绍一下。
一、表格单元格宽度的强制固定
曾经碰到一个非常头疼的问题：一个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]
