如何让网页适应所有的屏幕宽度+表格根据内容自适应

来源：互联网发布：基于hadoop的数据挖掘编辑：程序博客网时间：2024/06/04 19:16

1.HTML中，表格根据内容自适应宽度

<span style="color:#CC0000;">    td      {       white-space: nowrap;      }  </span>

亲试，可以

2.如何实现网页使用所有的屏幕宽度

原则：不使用绝对宽度由于网页会根据屏幕宽度调整布局，

所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。

具体说，CSS代码不能指定像素宽度：width:xxx px;

只能指定百分比宽度：width: xx%;或者width:auto;

字体也不能使用绝对大小（px），而只能使用相对大小（em）。

3.具体做法

这几行的语句都针对整个页面，即body标签或者最外层的那个div区域。

margin: 10px auto;
这一行保证了网页在任何分辨率下，都会居中。

min-width: 780px;
max-width: 1260px;
这二行规定了网页的最小和最大宽度。注意，IE6不支持这二行，即它们在IE6中是无效的。

width:expression_r(document.body.clientWidth <782? "780px" : document.body.clientWidth > 1262?"1260px" : "auto");
这一行是针对IE6的解决方法。它采用了CSS表达式，也可以通过javascript实现。
另外，如果想让内层的各个区块也自动伸缩，它们的宽度可以采用百分比的形式，比如：

#div-left{
width:50%;
}

#div-right{
width:50%;
}

4.流动布局（fluid grid）
"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现

资料：http://www.cnblogs.com/ricky_li/p/3806256.html

https://segmentfault.com/a/1190000003996026?_ea=451661

5.别人的demo

.g-bd{width: 95%;height: 300px;padding-top:20px;background-color: #bbbbbb;margin: 0 auto;}.in-bl{display: inline-block;}.f{width: 33.333%;height: 100px;background-color: #ab1256;}.s{width: 33.333%;height: 100px;}.t{width: 33.333%;height: 100px;background-color:#192873;}.in{margin:0 auto;px;width: 95%;background-color:#958727;height: 100%}

 <div class="g-bd"><div class="f in-bl">    <div class="in">            </div></div><div class="s in-bl"><!--这里把结束标签与下一个标签合并了，正式工作时会给后端工程师添麻烦，不建议使用-->    <div class="in">            </div></div><div class="t in-bl">    <div class="in">            </div></div></div>

效果：

0 0