html table 知识点

  1. 第一点就是图片在表格中不能对齐边沿的问题,这是和浏览器的渲染模式相关的,在标准模式中是不能对齐的,除非改变CSS某些样式。而在准标准模式和怪异模式中,默认就是对齐的。
    这一特性在以前的表格布局时代是大大的流行啊,比如使用透明图片撑大表格然后实现页面布局效果。由于现在大部分网站的doctype都是html5了,这会导致页面的渲染模式是标准模式,反而导致页面不对齐。

  2. 表格有一个css属性非常重要,就是table-layout,其默认值是auto,含义是根据内容自动实现表格的布局。这个时候设置表格的列宽是无效的。必须设置table-layout为fixed。

  3. 控制表格内容的溢出,需要设置表格table-layout: fixed; 然后设置td或者th元素white-space: nowrap;和overflow: hidden; 以上设置就可以实现IE和Firefox浏览器生效了。但是对于webkit浏览器,还需要设置table的width属性,否则还是没有效果。

  4. 其实控制表格内容溢出,最好的方式还是放一个span或者div在th或者td元素中,然后控制span或者div元素的溢出。

参考:
Why does overflow:hidden not work in a ?

你可能感兴趣的:(table)