为啥 colgroup/col 在 Chrome 中不起作用

Posted

技术标签:

【中文标题】为啥 colgroup/col 在 Chrome 中不起作用【英文标题】:Why colgroup/col doesn't work in Chrome为什么 colgroup/col 在 Chrome 中不起作用 【发布时间】:2012-05-04 14:13:47 【问题描述】:

my previous question 的答案之一指出 colgroup/col 应该只在 IE 中工作。

我编写了一个适用于 IE9 的示例(见下文)(将单元格内容集中在第 3 列),但不适用于最新版本的 Chrome。

我做错了什么?

html 示例:

<html>
<head><title>test table centerring</title></head>
<body>

    <table border="1">
        <colgroup>
            <col/>
            <col/>
            <col align="center">
        </colgroup>
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Value</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Name 1</td>
                <td>Value 1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Name 2, Name 2, Name 2, Name 2</td>
                <td>Value 2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Name 3</td>
                <td>Value 3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Name 4</td>
                <td>Value 4, Value 4, Value 4, Value 4</td>
            </tr>
        </tbody>
    </table>        

</body></html>

【问题讨论】:

他们说它只能在 IE 中运行,这意味着它不能在 Chrome 中运行。 【参考方案1】:

实际上,我很确定只有 IE 支持这一点,但对问题 Is there any way to center certain columns in table? 的答案之一感到困惑。 answer的作者还指出了一些限制: http://www.quirksmode.org/css/columns.html

不幸的是,表格列很难使用,因为如果使用它们,您实际上拥有的表格会以两种方式细分:按行和按列。一般规则是在行上定义的任何样式都会覆盖在列上定义的任何样式。

其次,W3C 规定只能在列上使用少数声明:边框、背景、宽度和可见性。例外:IE7 及更低版本允许所有声明。

第三,列样式是应用于整个列还是应用于其中包含的单个&lt;td&gt;s 存在一些混淆。边框声明似乎应用于整个列,但宽度应用于单个单元格。

这使得 colgroup/col 对居中几乎毫无用处。

【讨论】:

以上是关于为啥 colgroup/col 在 Chrome 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

Internet Explorer 中的渐进式表格呈现

我的字形在 Chrome 中坏了 - 为啥?

为啥 Chrome 本身允许网站访问 chrome-extension://*?

为啥 localStorage 不保留在 Chrome 中?

为啥 Chrome 不需要在更改时重新绘制整个图层?

为啥chromecast api无法在chrome扩展中加载?