col和colgroup
这俩标签也是xhtml的产物,功能强大,兼容奇差。
col标签为表格中一个或多个列定义属性值。
colgroup标签用于对表格中的列进行组合,以便对其进行格式化。
它们的作用主要就是来控制单元格的宽度了,这样省去单独定义每个单元格的麻烦,过去我们往往是在第一行中的th或者td上定义宽度来规定每列的宽度,而col不但可以定义宽度还能同时定义其他的属性,例如可以通过col来控制几列宽度的总和,还可以控制这列的背景色。但理想是丰满的,现实是骨干的,正如前面所说,功能越大不代表其兼容性也越强,据现有的测试下来,col和colgroup能发挥作用还能保证兼容的应用就只有俩:width和background。对于width,个人宁愿使用常规方式,第一行设置宽度,保证列宽。对于bacground,一般实际中表格大面积使用不同背景的情况也很少见。故个人认为:能不用尽量不用。
何处用table
个人认为,在一个放置数据非常密集且又非常序列化的一个容器里,用table准没错。最常见的例子就是我们常见的购物订单结算页面,上面列有你订单详情:商品名称、单价、购买数量、金额小计、运费等等,最后最下方还会有一个最终订单金额的结果,table在这里可谓是如鱼得水,达到了数据之载体的神效。
table疑难杂症之换行
用table显示数据有时候会有一个头疼的地方,即不换行显示某段文字,尤其在表头th中用到地方最多。其实你所头疼的并非换行,而是其背后的浏览器兼容加性使得换行的困难程度大大增。
总体来说在table中换行个人比较推荐的方式为:先为table设定table-layout:fixed,基本上设定完这个属性后基本的换行问题都能够解决而不会出现table中td,th因为里面各个内容的多寡发生抢夺其他td,th宽度的情形发生。这时如果你依旧有强制换行问题,那么在此td中内部加一层div,再利用word-wrap:break-word; word-break:break-all;这俩个CSS方法可以解决换行的问题。
攻略强制换行与强制不换行
强制换行与强制不换行问题曾经一度困扰着我,每当遇到换行问题时候那就是痛苦回忆的开始,现在终于痛定思痛,一鼓作气把这个长期顽固问题给解决。
强制换行与强制不换行用到的属性
我们一般控制换行所用到的CSS属性一共有三个:word-wrap; word-break; white-space。这三个属性可以说是专为了文字断行而创造出来的。首先我们得知道这三个属性到底是做什么用地:
word-wrap语法
word-wrap: normal(默认) | break-word
各个浏览器均能识别
参数:
normal: 允许内容顶开指定的容器边界。
break-word: 内容将在边界内换行。必要时会触发word-break(注意:请分辨清楚word-break和break-word这俩个是不同的东西,一为属性另为参数)。









