合并表格中的单元格并不像预期的那样工作

Question

这是我想要实现的表格：

但我不断得到这样的东西：

这是我尝试过的：

<table>
    <tr>
        <td rowspan="2">a</td>
        <td colspan="2">b</td>
    </tr>
    <tr>
        <td colspan="2">c</td>
    </tr>
    <tr>
        <td colspan="2">d</td>
        <td>e</td>
    </tr>
</table>

这是JSFiddle的链接（带有一些额外的代码示例）：http://jsfiddle.net/2292D/

Answer 1

您只需要vertical-align:middle和text-align:center

将此css应用于div

div {
   display:table-cell; // Change
   vertical-align:middle; //Change
   border: 1px solid blue;
}

td {
    border:  1px solid red;
    text-align:center; // Change

}

Fiddle Demo

Answer 2

使用table过去的好时光，使用rowspan和colspan来实现这种类型的表格结构，如果您使用此布局而不是，请使用{{1}而不是div和CSS定位。

Demo

float

Answer 3

我猜你需要3行，试试我的代码：

<table>
<tr>
    <td rowspan="2"><div id="a">a</div></td>
    <td colspan="2"><div id="b">b</div></td>
</tr>
<tr>       
    <td colspan="2"><div id="c">c</div></td>
</tr>
<tr>
    <td colspan="2"><div id="d">d</div></td>
    <td><div id="e">e</div></td>
</tr>

这是我的小提琴：http://jsfiddle.net/LLe5c/

Answer 4

在td上应用您的ID

html:

    <table>
        <tr>
            <td  id="a" rowspan="2"><div>a</div></td>
            <td id="b" colspan="2"><div >b</div></td>
        </tr>
        <tr>
            <td id="c" colspan="2"><div >c</div></td>
        </tr>
        <tr>
            <td id="d" colspan="2"><div >d</div></td>
            <td id="e"><div >e</div></td>
        </tr>
    </table>

Answer 5

这是解决方案

<table>
<tr>
    <td rowspan="2">a</td>
    <td colspan="2">b</td>
</tr>
<tr>
    <td colspan="2">c</td>
</tr>
<tr>
     <td colspan="2">d</td>
    <td>e</td>
</tr>
</table>

<style>
table {
    border-collapse: collapse;
    border-spacing: 0;
}
td {
    border:  1px solid red;
}

</style>