具有特殊布局的 HTML 表格答案

【问题标题】：HTML table with special layout具有特殊布局的 HTML 表格
【发布时间】：2017-01-16 23:46:32
【问题描述】：

如何在 css/html 中制作这样的表格：

我只想使用 div，而不是 <table> 标签。

代码：

<style>
.tab_in {
    display: table-cell;
    border: 1px dotted red;
    padding: 4px 6px;
}
</style>

<div style="text-align:center;">

<div class="tab_in">
<div>a</div>
<div>b</div>
</div>

<div class="tab_in" style="vertical-align:middle;">c</div>
<div class="tab_in" style="vertical-align:middle;">d</div>
<div class="tab_in" style="vertical-align:middle;">e</div>

</div>

【问题讨论】：

这个“表”的内容是什么？
那是......不是超级信息。我应该重新表述我的问题：布局的目的是什么？
对不起，我不太明白...“a”是文本，“b”是图像，其他都是文本。我希望除 a 和 b 之外的所有单元格都具有相同的尺寸。大单元格应与单元格 c、d、e 和 f 的组合具有相同的维度。
我想要做的事不可能吗？
好的。那么 a 和 b 代表一个单元格上的两位内容（文本和图像）？其他单元格（c - k）应该都具有相同的宽度和高度？

标签： html css tablelayout

【解决方案1】：

使用流体网格系统，该系统使用百分比而不是像素作为列宽。并使用外部容器处理它的外部宽度。

你可以这样做：

JSFiddle Demo

HTML：

<div class="box">
    <div class="row-fluid show-grid">
        <div class="span4">
            <div class="rowspan2">
                <span class="valign-helper"></span>
                a
            </div>
            <div class="rowspan2">
                <span class="valign-helper"></span>
                b
            </div>
        </div>
        <div class="span4">
            <div>c</div>
            <div>d</div>
            <div>e</div>
            <div>f</div>
        </div>
        <div class="span4">
            <div>g</div>
            <div>h</div>
            <div>i</div>
            <div>j</div>
        </div>
    </div>
</div>

注意：要垂直对齐文本，您也可以使用类“rowspan2”的“display: table-cell”css 属性。并删除带有“valign-helper”类的标签

CSS：

body {
    margin: 50px;
}

.box {
    width:500px;
    padding: 0 10px;
    background-color: #000;
}

.show-grid [class*="span"] div {
    background-color: #fff;
    text-align: center;
    min-height: 40px;
    line-height: 40px;
    margin-left: 0;
    margin-top: 10px;
    margin-bottom: 10px;
}

.show-grid [class*="span"] .rowspan2 {
    height: 90px;
    margin-bottom: 0;
}

.valign-helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

【讨论】：

【解决方案2】：

以下是您可以实现此目的的一种方式的示例：

http://jsfiddle.net/mori57/cDEGw/1/

html:

<table class="tab_out">
    <tr>
        <td rowspan="0" class="col">
            <div class="tab_in">a</div>
            <div class="tab_in">b</div>
        </td>
        <td><div class="tab_in">c</div></td>
        <td><div class="tab_in">g</div></td>
    </tr>
    <tr>
        <td><div class="tab_in">d</div></td>
        <td><div class="tab_in">h</div></td>
    </tr>
    <tr>
        <td><div class="tab_in">e</div></td>
        <td><div class="tab_in">i</div></td>
    </tr>
    <tr>
        <td><div class="tab_in">f</div></td>
        <td><div class="tab_in">j</div></td>
    </tr>
</table>

CSS：

.tab_out {
    width: 800px;
    margin-bottom: 20px;
    text-align:center;
}
.tab_out td {
    border:1px dotted red;
    padding: 4px 6px;
    margin-bottom: 0;
    vertical-align:middle;
}
.tab_in {
    display: block;
    border: 1px dotted green;
}

这是否更接近您正在寻找的内容？在这一点上，我真的看不到不使用表格来完成布局的有效方法。请注意，每个 TD 中的 div 是可选的，我只是用它来显示元素在表格中实际出现的位置。

【讨论】：

很好，只有一个问题：a 和 b 单元格应该在垂直中心，如图所示。
我不认为你的代码完全实现了 OP 正在寻找的东西。 A & B 不是单独的单元格，它们是一个单元格中的内容，该单元格应该与其他 4 个单元格的总和一样高。在您的代码中，没有一个单元格会影响彼此的高度：参见例如jsfiddle.net/DBryN/1
@Zen8000k：我以为 a 和 b 是一个单元格中的内容，而不是单独的单元格？
是的，我希望它们内容在一个单元格上。如果那不可能，我必须找到一种方法来做到这一点，即使不是 100% 我想要的。
好的，现在我们进入问题的核心（是的，@PaulD.Waite，我很确定我没有给他他想要的东西，但我想提供一个不是下面的选项，开始...）...给我一分钟。