在前一个单元格下方显示单元格

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 以使它们像普通盒子一样（就像 div，你知道的）：

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

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

tr { 
    overflow: hidden; 
}

td {
    margin-left: 100px;
}

td:first-child {
    float: left;
    margin: 0;
    width: 100px;
}

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 巫毒，但它实际上适用于大多数浏览器：

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 和更早版本。所以如果你也想支持旧版本....@987654322 @

诀窍是将所有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>