如何让表格单元格向右对齐？答案

【问题标题】：How to get a table-cell aligned to the right?如何让表格单元格向右对齐？
【发布时间】：2013-12-08 19:37:44
【问题描述】：

我有一个有两行的表。
看起来像这样：

—————————————————
|   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.

我尝试了边距和浮动。如果可能的话，我想避免绝对和浮动。

【问题讨论】：

标签： css alignment css-tables

【解决方案1】：

如果您不想要一个额外的单元格的唯一原因是因为您无法控制 HTML，您可以这样做：

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

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

【讨论】：

【解决方案2】：

为什么不直接添加一个空单元格？这没有什么问题。看到这个question

jsFiddle example

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

【讨论】：

我知道这行在问题中并不突出，但它说我想在括号中避免这种情况。
@henryaaron 好吧，我一定错过了，除非你刚刚在... 空单元格没有任何问题，请参阅此问题stackoverflow.com/questions/19842218/…
哦，我很清楚这一点。不幸的是，我无法控制我的 HTML ............
@henryaaron 尽管如此，无论你是否可以编辑HTML，这都是解决问题的最佳方法。如果您查看我链接到的问题，您会看到 BoltClock's 的答案指出 W3 spec (example) 出于完全相同的目的使用了一个空表。

【解决方案3】：

我不知道你到底想达到什么，但试试这个

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

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

你可以将类重命名为 .right_cell

【讨论】：

FF不同意这种方法。
是的，根据 W3C 规范，不应定位表格元素。
@m59 我正在解决一个没有设计标准的问题
最好的解决方案是添加空单元格，但@henryaaron 说他不想！
@ProllyGeek 也许它适用于所有更新的浏览器。看来最新的 Firefox 版本确实支持它。