html - 具有特殊布局的 HTML 表格

Question

如何像这样在 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>

Answer 1

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

您可以执行以下操作：

JSFiddle 演示

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;
}

Answer 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 是可选的，我只是用它来向您展示元素在表格中实际出现的位置。