Question

我有以下结构：

<table>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr>
        <td>x</td>
        <td>y</td>
        <td>z</td>
    </tr>
</table>

并且，使用CSS，我希望看到以下结果（没有可见边框）：

+---+---+
| a | b |
|   | c |
+---+---+
| x | y |
|   | z |
+---+---+

详细说明我的动机：该表是工作历史的概述，列是期间，职位和雇主。为了便于阅读，我想把雇主置于职位之下。

Answer 1

使用普通表格布局无法使用CSS执行此操作。表格元素具有特殊的display属性（table，table-row等），但您可以将它们重置为block，使其像普通框一样（如{{1}你知道）：

div

然后构建自己的结构，一个带浮点数的例子：

table, tbody, tr, td { 
    display: block; 
}

jsFiddle Demo

通过这种方式，您可以保留语义信息，但可以根据您的特殊需求进行设计。

Answer 2

我认为这是最简单的方法。

<table>
<tr>
    <td>a</td>
    <td>b</td>
</tr>
<tr>
    <td> </td>
    <td>c</td>
</tr>
<tr>
    <td>x</td>
    <td>y</td>
</tr>
<tr>
    <td> </td>
    <td>z</td>
</tr>
</table>

Answer 3

这有点css voodoo但它实际上适用于大多数浏览器：

http://jsfiddle.net/FyLJh/

通常保留表格样式并仅更改要重新调整的样式：

th { vertical-align: top; }
td { display: block; }

我在这里使用了th + td，但你当然也可以用一个类来做这个。

Answer 4

虽然我同意Kappa解决方案，但考虑到你不想将默认table布局更改为block，这里是另一个demo，这是一个交叉浏览器IE支持 !!

td {
    margin-left: 100px;
}
td:first-child {
    float: left;
    margin: 0;
    width: 100px;
    background: red;
}
td:nth-child(2) {
    content:" ";
    float:right;
    width:60%;
    margin-top:-20px;
    text-align:center;
}
td:nth-child(3) {
    content:" ";
    float:right;
    width:60%;
    margin-top:10px;
    text-align:center;
}

注意：所有主要浏览器都支持：nth-child（）选择器，IE8和更早版本除外。如果您想要支持旧版本，也需要支持... {{{ 3}}

诀窍是用childs

替换所有class

Answer 5

根据kapa的回答，我得出了以下工作解决方案：

td {
    vertical-align: top;
}
td.above, td.above + td {
    display: block;
}

对于HTML：

<tr>
    <td>a</td>
    <td class="above">b</td>
    <td>c</td>
</tr>
<tr>
    <td>x</td>
    <td class="above">y</td>
    <td>z</td>
</tr>

请参阅jsfiddle.net/pjhmU/9。

Answer 6

<table border="0">
    <tr>
        <td>a</td>
        <td>b</td>
</tr>
<tr>
        <td colspan="2" align="right">c</td>
    </tr>
    <tr>
        <td>x</td>
        <td>y</td>
</tr>
<tr>
        <td colspan="2" align="right">z</td>
    </tr>
</table>

Answer 7

请使用此结构

<table>
   <tr>
      <td>a</td>
      <td style="width:50px"><span>b</span><span>c</span></td>
   </tr>
   <tr>
      <td>d</td>
      <td style="width:50px"><span>e</span><span>f</span></td>
   </tr>
</table>

显示前一个单元格下方

7 个答案: