Fatal编程技术网
  • css/
  • CSS“display:table column”应该如何工作？

CSS“display:table column”应该如何工作？

css

CSS“display:table column”应该如何工作？,css,tablelayout,css-tables,Css,Tablelayout,Css Tables,考虑到下面的HTML和CSS，我在我的浏览器Chrome和IE中看不到最新的内容。所有内容都会压缩到0x0 px。为什么? <!DOCTYPE html> <html> <head> <style type="text/css"> section { display: table; height: 100%; background-color: grey; } #colLeft { display: tab

考虑到下面的HTML和CSS，我在我的浏览器Chrome和IE中看不到最新的内容。所有内容都会压缩到0x0 px。为什么?

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        section { display: table; height: 100%; background-color: grey; }

        #colLeft { display: table-column; height: 100%; background-color: green; }
        #colRight { display: table-column; height: 100%; background-color: red; }

        #row1 { display: table-row; height: 100%; }
        #row2 { display: table-row; height: 100%; }
        #row3 { display: table-row; height: 100%; }

        #cell1 { display: table-cell; height: 100%; }
        #cell2 { display: table-cell; height: 100%; }
        #cell3 { display: table-cell; height: 100%; }
    </style>
</head>
<body>
    <section>
        <div id="colLeft">
            <div id="row1">
                <div id="cell1">
                    AAA
                </div>
            </div>
            <div id="row2">
                <div id="cell2">
                    BBB
                </div>
            </div>
        </div>
        <div id="colRight">
            <div id="row3">
                <div id="cell3">
                    CCC
                </div>
            </div>
        </div>
    </section>
</body>
</html>
表列显示类型意味着它的行为类似于HTML中的标记，即一个不可见元素，其宽度*控制封闭表中相应物理列的宽度

有关CSS表模型的更多信息，请参见

*还有一些其他属性，如边框、背景。

CSS表格模型基于HTML表格模型

表格分为多行，每行包含一个或多个单元格。单元格是行的子元素，而不是列的子元素

显示：表列不提供制作专栏布局的机制，例如具有多个专栏的报纸页面，其中内容可以从一个专栏流向下一个专栏

相反，“表列”仅设置应用于表行中相应单元格的属性。例如，可以描述每行中第一个单元格的背景色为绿色

表本身的结构始终与HTML中的结构相同

在HTML中，注意tds在trs内，而不是在COL内：

<table ..>
  <col .. />
  <col .. />
  <tr ..>
    <td ..></td>
    <td ..></td>
  </tr>
  <tr ..>
    <td ..></td>
    <td ..></td>
  </tr>
</table>
第1行第一个单元格的内容 第1行第二个单元格的内容 第2行第一个单元格的内容 第2行第二个单元格的内容
如果col元素具有逻辑结构，那么如何使用CSS规则display:table column；，哪一个只有表象结构？根据显示器上的规格，它应该像col元素一样工作。但我看不出这有多有用…@TestSubject528491，因为这样你就可以设置[呈现]表的列背景、列宽等。但实际上，它在为标记本身指定默认样式规则方面，或在不同的基于XML的标记语言中指定等效标记方面，最有用。@chharvey:HTML的col是一个逻辑元素，只包含表示样式。你不能在里面放一栏信息，这是一个常见的误解。表数据总是在行中。显示：表格列；将逻辑元素（通常是div）转换为col。它会使分配给该元素的其他样式字段应用于列的表示概念。结果是一个不显示的逻辑元素，其内容（如果有）将被忽略；它的唯一作用是将样式应用于关联表示的列。请看我的模板答案。我自己也没有尝试过，但我看到了一些建议，其中包括针对IE6和IE7的javascript解决方案。当javascript运行时，它会将页面转换为旧的HTML表标记。解决方案适用于IE8+、Firefox、Chrome、iPad和Android。如果您需要灵活的表格结构，并且支持上面列出的更现代的浏览器，那么这是避免表格布局的一个好方法！这有什么问题？@xgqfrms:一定是其他css规则覆盖了颜色。可能是应用于单元格内某个元素的规则。例如，如果文本在内，则在某个地方有更具体的规则设置颜色。尝试如果这是可行的，那么这就是问题所在。但是，不要养成过度使用的习惯！重要的在看到这项工作之后，最好删除它，并找出一个更具体的选择器来优先。谷歌css更具体的选择器，或参见