Как выровнять ячейку таблицы по правому краю?

У меня есть таблица с двумя строками.
Выглядит примерно так:

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

Я пробовал поля и поплавки. Я хотел бы избежать абсолютных и поплавков, если это возможно.


alignment css css-tables
person henryaaron    schedule 24.11.2013    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Если единственная причина, по которой вам не нужна дополнительная ячейка, потому что у вас нет контроля над HTML, вы можете сделать это:

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

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

person Alohci    schedule 24.11.2013

arrow_upward
4
arrow_downward

Почему бы просто не добавить пустую ячейку? В этом нет ничего плохого. См. этот вопрос

пример 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;
}
person Josh Crozier    schedule 24.11.2013
comment
Я знаю, что эта строка не выделяется в вопросе, но в скобках написано, что я бы хотел этого избежать. - person henryaaron; 24.11.2013
comment
@henryaaron Хорошо, я, должно быть, пропустил это, если вы только что не добавили это в ... Нет ничего плохого в пустой ячейке, см. этот вопрос stackoverflow.com/questions/19842218/ - person Josh Crozier; 24.11.2013
comment
О, я прекрасно это знаю. К сожалению, я не контролирую свой HTML........................ - person henryaaron; 24.11.2013
comment
@henryaaron Тем не менее, это лучшее решение проблемы, независимо от того, можете ли вы редактировать HTML или нет. Если вы посмотрите на вопрос, на который я ссылаюсь, вы увидите, что ответ BoltClock указывает, что спецификация W3 (пример) использовала пустая таблица для той же цели. - person Josh Crozier; 24.11.2013

arrow_upward
1
arrow_downward

я не знаю, чего именно ты пытаешься добиться, но попробуй вот это

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

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

ну, вы можете просто переименовать класс в .right_cell

person ProllyGeek    schedule 24.11.2013
comment
FF не согласен с этим методом. - person henryaaron; 24.11.2013
comment
Да, согласно спецификации W3C, элементы таблицы не должны позиционироваться. - person m59; 24.11.2013
comment
@ m59 я решаю проблему, не разрабатывая стандарт - person ProllyGeek; 24.11.2013
comment
лучшим решением было добавить пустую ячейку, но @henryaaron сказал, что не хочет! - person ProllyGeek; 24.11.2013
comment
@ProllyGeek Я понятия не имею, о чем ты говоришь. Вы имеете в виду, что мы можем просто придумывать решения, которые не работают, и все браузеры должны реализовывать то, что мы пишем? - person m59; 24.11.2013
comment
@ m59 нет, но я говорю, что когда у вас есть проблема, а клиент отказывается от логического решения, вы должны придумать обходной путь, и мое решение подходит для всех браузеров !! в любом случае, я пытался помочь, и тот, кто задал вопрос, должен сказать, был ли мой ответ удовлетворительным или нет !! не стоит тратить время :) - person ProllyGeek; 24.11.2013
comment
@ProllyGeek возможно работает во всех обновленных браузерах. Кажется, что самая последняя версия Firefox поддерживает это. - person m59; 24.11.2013
comment
слева: 100% было полезно для меня (отсюда +1), но лучше не предлагать !important заранее, его следует использовать в крайнем случае, когда абсолютно необходимо. - person downhand; 04.06.2015