Выравнивание по правому краю одного столбца и выравнивание другого по левому краю в одной таблице

Я создал html-таблицу с двумя столбцами. Я хочу, чтобы первый столбец, содержащий текст, был выровнен по правому краю, но я хочу, чтобы второй столбец оставался выровненным по левому краю, поскольку он содержит флажки. Для презентации это выглядело бы, но я понятия не имею. Я попытался создать td class="column1", затем text-align: right; в CSS, но не повезло.

Любые идеи очень приветствуются.

HTML

<td class="column1">Retrieve Logs:</td>
<td class="column2"><input type=checkbox name="getcamlogs" checked="checked"></td>

CSS

td.column1 {
   text-align: right;
}

html css html-table text-alignment
person smurf    schedule 02.09.2011    source источник
comment
В коде, который вы разместили, нет ничего плохого, он отлично работает в моем браузере.   -  person nobody    schedule 02.09.2011
comment
В самом деле? Все равно не работает на минах :/   -  person smurf    schedule 02.09.2011
comment
Хорошо работает, простой пробел останавливал его! Типичный! Большое спасибо!   -  person smurf    schedule 02.09.2011
comment
Этот ответ на аналогичный вопрос лучше: stackoverflow.com/a/11984864/3421814   -  person Andrej Adamenko    schedule 08.10.2020

Ответы (1)


arrow_upward
7
arrow_downward

Вот, должно сработать :)

<style>
    #mytable {width:500px; margin:0 auto;}
    #mytable td {width:250px;}
    #mytable .left {text-align:right; background:#333;}
    #mytable .right {text-align:left; background:#666;}
</style>

<table id="mytable">
    <tr>
        <td class="left">1</td>
        <td class="right">2</td>
    </tr>   
</table>
person Graeme Leighfield    schedule 02.09.2011
comment
В качестве стилистического момента я бы постарался избежать вызова классов влево и вправо, когда вы используете их для изменения выравнивания слева и справа. Это просто рецепт путаницы. :) - person Chris; 02.09.2011
comment
Ну да, но это только для демонстрационных целей :) - person Graeme Leighfield; 02.09.2011
comment
Если в вашей таблице много строк и вы хотите сэкономить пропускную способность, мне интересно, есть ли для этого трюк с Javascript. Вместо добавления класса в каждую ячейку таблицы. Во всяком случае, просто мысль. - person PJ Brunet; 04.07.2012