如何使表格单元格右对齐？

Question

我有一个表格，其中有两行。
看起来像这样：

—————————————————
|   1   |   2   |
|———————————————|
|   3   |       |
—————————————————

第一行有两个单元格，但第二行只有一个。

我该如何使第二行的唯一表格单元格与第一行的第二个表格单元格对齐？（不在第二行的单元格前添加单元格）
像这样：

—————————————————
|   1   |   2   |
|———————————————|
|       |   3   |
—————————————————

这是我的HTML：

<div class="table">
    <div class="row">
        <div class="cell one">
            1
        </div>
        <div class="cell two">
            2
        </div>
    </div>
    <div class="row">
        <div class="cell three">
            3
        </div>
    </div>
 </div>

我的CSS：

div.table {
    display:table;
    background:#EEE;
    padding:10px;
}
 div.row {
    display:table-row;
    background:#610;
    padding:10px;
    width:100%;
    text-align:right;
}
 div.cell {
    display:table-cell;
    background:#016;
    padding:10px;
    color:white;
    font-family:sans-serif;
}

jsFiddle。

我已经尝试过边距和浮动。如果可能的话，我想避免使用绝对定位和浮动。

- henryaaron

Answer 1

如果你不想增加一个单元格的唯一原因是你无法控制HTML，那么你可以这样做：

.row + .row:before {
    content: '';
    display:table-cell;
    background-color:white;
}

http://jsfiddle.net/7H7rf/6/

- Alohci

Answer 2

为什么不直接添加一个空单元格呢？这样做并没有问题。详情请见此问答。 jsFiddle 示例 HTML

<div class="table">
    <div class="row">
        <div class="cell one">
            1
        </div>
        <div class="cell two">
            2
        </div>
    </div>
    <div class="row">
        <div class="cell three"></div>
        <div class="cell three">
            3
        </div>
    </div>
</div>

接下来使用以下CSS将空单元格的背景设置为灰色：

div.cell:empty {
    background:#EEE;
}

- Josh Crozier

---

我知道这行代码在问题中并不突出，但它表明了我想要避免在括号中使用它。 - henryaaron

@henryaaron 好的，我可能错过了那个，除非你刚刚添加了那个...一个空单元格没有任何问题，请参见此问题https://dev59.com/e2Ij5IYBdhLWcg3w04Xd - Josh Crozier

哦，我非常清楚。不幸的是，我无法控制我的HTML。 - henryaaron

@henryaaron 尽管如此，无论您是否能够编辑HTML，这都是解决问题的最佳方案。如果您查看我链接的问题，您会发现BoltClock's的答案指出，一个**W3规范（示例）**使用了一个空表格来实现完全相同的目的。 - Josh Crozier

Answer 3

我不知道你确切想要实现什么，但是试试这个。

.three
{
position:relative!important;
left:100%!important;
display:inline-block!important;
}

http://jsfiddle.net/7H7rf/4/

好的，你可以将类别名称改为.right_cell

- ProllyGeek

---

FF不赞同这种方法。 - henryaaron

根据W3C规范，表格元素不应该被定位。 - m59

@m59 我正在解决一个问题，而不是设计一个标准。 - ProllyGeek

最好的解决方案是添加空单元格，但@henryaaron说他不想要！ - ProllyGeek

@ProllyGeek 也许它支持所有更新的浏览器。最近的Firefox版本似乎支持它。 - m59