• 技术文章 >web前端 >H5教程

    如何解决table标签和col标签的一系列问题?

    2016-06-07 08:43:47原创1328
    我想用一个列表布局输出一系列信息,第一列是序号,第二列是图片,第三列要求文本左对齐。第四列是链接按钮。
    我的代码如下:








    1我是一个字符串

    问题1:我注意到h5不支持col标签中的align属性定义左对齐,可是我写在style里也不起作用,如何实现?难道非得在每个th标签里加style="text-align: left"吗?
    问题2:我查到其他的解决方案是给第三个col添加左浮动的样式,可是这样一来第三列第四列的大小又变了,第四列的位置也变了..........
    问题3:是不是这种布局最好不要用table标签来实现?我看到很多类似的布局都是用各种div、设浮动实现的。但是table比起他们来说有自动垂直居中、排布简单的优点,又让我不忍放弃...

    回复内容:

    谢邀。

    首先,CSS Selectors 4 可以这样:
    col.left-aligned || td { text-align: left }

    td:nth-column(odd) { text-align: left }

    不过目前为止(2016年4月),没有任何一款浏览器支持“||”combinator和nth-column伪类等特性。


    下面谈点历史:

    之所以直接在 col 上定义样式无效,是一个老问题了。实际上HTML4定义的col上的align属性在现代浏览器上从来没有得到过良好支持(只有始于CSS时代之前的IE支持),原因很简单,因为此设计在CSS1、2乃至3的机制中都无法实现。

    按照CSS的模型,一个元素上的CSS样式值要么来自于匹配了自己的规则,要么来自于匹配了祖先元素的规则然后通过继承获得。所以一个cell(td/th)的text-align,要么来自于匹配td/th的规则,要么来自于tr,tbody,table等祖先元素。而col/colgroup不可能是其祖先元素。

    因此尽管这个需求被开发者要求了十多年,但是始终未能满足。最终还是需要通过更新CSS规范,创造新的combinator和伪类来实现。


    下面谈你这个需求:

    一、table元素应该用于真的表格,所谓真的表格即二维数据表。从你的需求来看,其实并不像是真的数据表。因此不建议用table元素。

    二、其实你可以使用 nth-child 来实现你要的效果。

    以上。
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:lt gt style table width
    上一篇:绝对零基础,选择做 HTML5 还是 iOS 应用? 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • HTML5 应用程序缓存(Application Cache)• 基于Modernizr 让网站进行优雅降级的分析_html5教程技巧• 哪个开源的移动 HTML5 框架更好一点?此问题提出于2011年• Web 平台是否会在移动平台上最终超过应用平台?为什么?• phonegap使用方法介绍(七)播放音频的实现方法
    1/1

    PHP中文网