Question

我的网站有一个非常活跃的背景（我在这里讲了6个不同的z索引，其中2个是动画）。我想在前景中有一个内容，但想要一个＆＃34;窗口＆＃34;通过它的背景。我遇到的一些问题：

你不能打一个洞＆＃34;在后台，所以......
- 我构建了一个包含div，让我们称之为＆＃34; srminfo＆＃34;
- 在里面，我有一个＆＃34; top＆＃34;，＆＃34; left＆＃34;，＆＃34; window＆＃34;，＆＃34; right＆＃34;和＆＃34;底部＆＃34;
- 顶部，左侧，右侧，底部都有不透明的白色背景
- 而srminfo和window divs的背景为：none;
无论我怎么努力，＆＃34;对＆＃34; div不会填补＆＃34; top＆＃34;之间的空间。和＆＃34;底部＆＃34; divs，我尝试了很多不同的东西。它必须是动态的原因是＆＃34;左边＆＃34; div基于背景颜色是动态的，背景颜色本身是用JavaScript随机生成的。

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

Answer 1

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

display：table;

令人惊讶的是，在线提供的关于如何实际使用它的信息非常少，即使在这里，依此类推＆＃34; How＆＃34;：

要使用这段精彩的代码，您需要回想一下表格是构建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列中文本设置的自动高度。 WIN！

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

值得注意的是display: table;在IE6或7中不起作用（谢谢，FelipeAls ），因此根据您对浏览器兼容性的需求，这可能不会是你正在寻求的答案。

Answer 2

使用parent>子选择器关系更加容易，因此内部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

CSS属性的display:table系列主要存在，因此可以根据它们定义HTML表。因为它们与特定的标签结构密切相关，所以除了它们之外没有多少用途。

如果您要在页面中使用这些属性，则需要一个与表格相近的标记结构，即使您实际上并未使用<table>系列标记。最小版本将是单个容器元素（display:table），其中直接子节点可以全部表示为行（display:table-row），它们本身具有可以全部表示为单元格的直接子节点（{{ 1}}）。还有其他属性可以让您模仿display:table-cell系列中的其他标记，但它们需要HTML中的类似结构。如果没有这个，那么很好地（如果不是不可能）充分利用这些属性。

Answer 4

如何（以及为什么）使用显示：表格单元格（CSS）

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

在我十多年的Web开发经验中，我想不到有一次我会拥有一堆<div>样式的display而不是一个更好的选择有表格元素。

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

但这是一个非常人为的示例，在所有实际情况下，我都知道仅使用表标记会更好。

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

4 个答案:

HTML

CSS