iiil
@iiil
Инженер и вэб-дизайнер, рисую.

Как выровнять текст в таблице по столбцам?

Здравствуйте!

В таблицах данные лучше выравнивать по столбцам: текст по левому краю, числа по правому (или по точке).
JYlUdhY.png
В html есть тег col, он бы прекрасно подошел, так как таблицы все разные и все равно придется прописывать руками выравнивание, однако как раз выравнивание в нем не поддерживается тем же ff.
htmlbook.ru/html/col/align
Данный пример не будет работать в ff, текст остается по левому краю.
jsfiddle.net/iiil/jkCUz

Поступить можно по-разному, прописывать выравнивание для каждой ячейки (или присвоить класс каждой ячейке) - это тоже вариант, так как в том же DW это делать очень быстро в режиме визуального редактирования; написать скрипт на js/jq, который будет брать данные из тегов col и распространять их на все ячейки.

Но, может, я что-то не знаю, и есть способ проще? Да, нужна поддержка ie7 :)

Или, возможно, есть готовые библиотеки, где, скажем, в теге th прописываешь выравнивание, а он распространяет его на все td под этим заголовком? Так как волнуется только визуальная часть, хотелось бы обойтись без огромных библиотек по работе с табличными данными.

Буду рад советам.
  • Вопрос задан
  • 12022 просмотра
Решения вопроса 1
@whats
Про братский селектор все забыли
table tr td{
  text-align: right;
}
table tr td ~ td{
  text-align: left;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
@Yago
Выравнивайте через css:
/*выравнивание первой колонки таблицы */
table tr td{
  text-align:center;
}
/*выравнивание второй колонки таблицы */
table tr td+td{
  text-align:right;
}
Ответ написан
nazarpc
@nazarpc
Open Source enthusiast
table td:nth-of-type(2n) {
    text-align: left;
}
table td:nth-of-type(2n + 1) {
    text-align: right;
}

Для двух колонок
Ответ написан
table tr td{
  text-align: right;
}
table tr td:first-child{
  text-align: left;
}

Первая колонка выравнена по левому краю, остальные по правому. Поддержка first-child браузерами.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы