Каков правильный способ CSS для реализации выровненного по правому краю текста в столбцах таблицы?

К моему удивлению, я только что узнал, что применение выравнивания текста к столбцу таблицы довольно плохо поддерживается в текущих браузерах. Ни в Firefox 3.5.2, ни в Safari 4.0.3, ни в IE8 столбец «сумма» ниже не отображается с выравниванием по правому краю.

HTML:

<table class="full_width">
  <caption>Listing employees of department X</caption>
  <col></col>
  <col></col>
  <col></col>
  <col class="amount" width="180"></col>
  <thead>
    <tr>
      <th>Name</th>
      <th>Phone number</th>
      <th>Email</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>+45 2373 6220</td>
      <td>[email protected]</td>
      <td>20000</td>
    </tr>
  </tbody>
</table>

CSS

.amount{
  text-align: right;
}

Почему это не работает? Также я попытался (через firebug) отключить собственное правило Firefox, которое выравнивает элементы TD по левому краю, но это тоже не сработало.

Я вижу, что настройка правила цвета фона в классе суммы css действительно работает. Итак, я знаю, что класс .amount применяется ко всем столбцам:

CSS

.amount{
  text-align: right;
  background-color: aqua;
}

Спецификация CSS 2, по-видимому, говорит, что элемент col поддерживает только четыре атрибута - см. Почему столбцы таблицы стилей не разрешены?

Критерии выбора наилучшего решения: должна поддерживаться достаточно кроссбраузерность (не обязательно в IE6, где я мог бы жить с использованием jquery или условного комментария для включения конкретного решения). Кроме того, я ожидаю применить несколько классов к нескольким различным столбцам (т.е. class="amount before_tax")

Я бы не хотел устанавливать классы для соответствующих td в каждой строке. Каковы мои варианты?


alignment css html-table
person Jesper Rønn-Jensen    schedule 08.09.2009    source источник

Ответы (5)


arrow_upward
7
arrow_downward

Я бы не хотел устанавливать классы для соответствующих td в каждой строке. Каковы мои варианты?

Вот бы так: класс по каждому тд.

person cletus    schedule 08.09.2009
comment
Я ненавижу принимать этот ответ, но другие имеющиеся параметры, вероятно, слишком заблокированы или зависят от браузера. - person Jesper Rønn-Jensen; 09.09.2009
comment
Кроссбраузерность включая IE6 означает только два варианта: класс на каждом TD или Javascript и первый вариант намного лучше. - person cletus; 09.09.2009
comment
ФУ. ›.‹ Я так надеялся узнать, что это не так. - person noio; 29.01.2012

arrow_upward
2
arrow_downward

Если вы не хотите добавлять класс в каждую ячейку в столбце вручную, единственный другой вариант — использовать для этого javascript.

С jQuery:

$("table tbody tr td:eq(3)").addClass("amount");
person Garry Shutler    schedule 08.09.2009

arrow_upward
1
arrow_downward

Вы всегда можете установить класс для последнего элемента в строке:

.full_width td:last-child {
    text-align: right;
}
person Nino    schedule 08.09.2009
comment
Да, или, в более общем смысле, nth-child. Конечно, это селекторы CSS3, так что не ждите поддержки в IE. IE7+ имеет только первого потомка CSS2. - person bobince; 08.09.2009

arrow_upward
0
arrow_downward

вы должны установить класс для элементов td. Я думаю, это единственный способ.

person Nir Levy    schedule 08.09.2009

arrow_upward
0
arrow_downward

Ваши ответы заставили меня задуматься о создании сценария JQuery, который анализирует элементы COL. Затем он должен найти каждую строку, соответствующую соответствующему COL, и применить класс COL к каждому элементу следующим образом:

enter code here$("таблица tbody tr td:eq(3)").addClass("сумма");

Но делайте это (как улучшение производительности) только в том случае, если определение класса содержит выравнивание текста.

Конечно, полная комплексная реализация элементов colspan и COLGROUP будет излишней и, скорее всего, не будет поддерживаться.

Есть мысли по поводу этой идеи?

person Jesper Rønn-Jensen    schedule 09.09.2009