如何(以及为什么)使用display:table-cell(CSS)

Question

我有一个非常活跃的网站背景(我说的是6个左右不同的z索引,其中2个带有动画).我想在前景中有一个内容,但想要一个"窗口"到它的背景.我遇到的一些问题:

1. 你不能在背景中"打洞",所以......

   • 我构建了一个包含div,让我们称之为"srminfo"
   • 在里面,我有一个"顶部","左","窗口","右"和"底部"
   • 顶部,左侧,右侧,底部都有不透明的白色背景
   • 而srminfo和window divs有background:none;

2. 无论我怎么努力,"正确"的div都不会填补"顶部"和"底部"div之间的空间,我尝试了很多不同的东西.它必须是动态的原因是"left"div中的文本是基于背景颜色动态的,背景颜色本身是用JavaScript随机生成的.

如何显示:表; 以及所有其他相关的CSS代码,如表格？它怎么用？

Answer 1

经过几天试图找到答案,我终于找到了

显示:表;

令人惊讶的是,在线提供的关于如何实际使用它的信息很少,即使在这里也是如此,所以"如何":

要使用这段精彩的代码,您需要回想一下表格是构建HTML的唯一真正方法,即语法.要获得包含2行和3列的表,您必须执行以下操作:

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

与获取CSS类似,您将使用以下内容:

HTML

<div id="table">
    <div class="tr">
        <div class="td"></div>
        <div class="td"></div>
        <div class="td"></div>
    </div>
    <div class="tr">
        <div class="td"></div>
        <div class="td"></div>
        <div class="td"></div>
    </div>
</div>

CSS

#table{ 
    display: table; 
}
.tr{ 
    display: table-row; 
}
.td{ 
    display: table-cell; }

正如您在下面的JSFiddle示例中所看到的,第3列中的div没有内容,但是它们遵循前2列中文本设置的自动高度.赢得!

http://jsfiddle.net/blyzz/1djs97yv/1/

值得注意的是,display: table;在IE6或7中不起作用(感谢FelipeAls),因此根据您对浏览器兼容性的需求,这可能不是您所寻求的答案.

Answer 2

使用parent> child选择器关系甚至更容易，因此内部div不需要显式定义其css类：

.display-table {
    display: table; 
}
.display-table > div { 
    display: table-row; 
}
.display-table > div > div { 
    display: table-cell;
    padding: 5px;
}

<div class="display-table">
    <div>
        <div>0, 0</div>
        <div>0, 1</div>
    </div>
    <div>
        <div>1, 0</div>
        <div>1, 1</div>
    </div>
</div>

Answer 3

如何（以及为什么）使用 display: table-cell (CSS)

我只是想提一下，因为我认为其他任何答案都没有直接做到，“为什么”的答案是：没有充分的理由，您可能永远不应该这样做。

在我 10 多年的 Web 开发经验中，我想不出有哪一次比只有表格元素更适合拥有一堆<div>带有display样式的s 。

我能想到的唯一假设是，如果您有以某种非 HTML 表格格式（例如 CSV 文件）存储的表格数据。在这种情况的一个非常特定的版本中，只在所有内容周围添加标签，然后添加基于后代的样式，而不是添加实际的表格标签，可能会更容易<div>。

但这是一个非常人为的例子，在我知道的所有真实情况下，简单地使用表格标签会更好。

Answer 4

该display:tableCSS属性的家庭大多有使HTML表格可以在他们来界定。因为它们与特定的标签结构如此紧密地联系在一起，所以除此之外他们看不到太多用途。

如果您打算在您的页面中使用这些属性，您将需要一个与表格非常相似的标签结构，即使您实际上并未使用<table>标签系列。最小版本将是单个容器元素 ( display:table)，具有可以全部表示为行 ( display:table-row) 的直接子元素，而行本身具有可以全部表示为单元格 ( display:table-cell) 的直接子元素。还有其他属性可以让您模仿系列中的其他标签table，但它们需要 HTML 中的类似结构。没有这个，就很难（如果不是不可能的话）充分利用这些属性。

Answer 5

我没有 10 年的 Web 开发经验，但只有一年左右的时间，我很快就遇到了一个不能使用表格元素但可以使用 CSS table : forms 的用例。表格和表格不能很好地结合在一起。表单不允许是表元素的子元素。因此，评论之前的评论：div 和 CSS table 至少在您想要将表单放入表格时很有用。让-伊夫