Подтвердить что ты не робот

Лучший способ выравнивания текста в таблице HTML

У меня есть таблица HTML с большим количеством строк, и мне нужно выровнять один столбец справа.

Я знаю следующие способы:

<tr><td>..</td><td>..</td><td align='right'>10.00</td><tr>

и

<tr><td>..</td><td>..</td><td class='right-align-class'>10.00</td><tr>

В обоих методах мне нужно повторить параметр align или class на каждом теге <tr>. (Если есть 1000 строк, я должен поместить align = 'right' или class= 'right-align-class' 1000 раз.)

Есть ли эффективный способ сделать это? Есть ли какой-либо прямой способ сказать, выровняйте третий столбец во всех строках вправо?

4b9b3361

ОТВЕТЫ

Ответ 1

Чтобы ответить на ваш вопрос напрямую: нет. Нет более простого способа получить последовательный внешний вид во всех современных браузерах, не повторяя класс в столбце. (Хотя, см. Ниже re: nth-child.)

Ниже приведен наиболее эффективный способ сделать это.

HTML:

<table class="products">
  <tr>
    <td>...</td>
    <td>...</td>
    <td class="price">10.00</td>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
    <td class="price">11.45</td>
    <td>...</td>
    <td>...</td>
  </tr>
</table>

CSS

table.products td.price {
  text-align: right;
}

Почему вы не должны использовать nth-child:

Псевдо-селектор CSS3, nth-child, был бы идеальным для этого - и гораздо более эффективным - но он нецелесообразен для использования в реальной сети, как она существует сегодня. Он не поддерживается несколькими крупными современными браузерами, включая все IE от 6-8. К сожалению, это означает, что nth-child не поддерживается в значительная доля (не менее 40%) браузеров сегодня.

Итак, nth-child - это потрясающе, но если вы хотите иметь постоянный внешний вид, это просто нецелесообразно использовать.

Ответ 2

Если это всегда третий столбец, вы можете использовать это (при условии, что класс таблицы "продукты" ). Тем не менее, это хакерство, но не надежное, если вы добавляете новый столбец.

table.products td+td+td {
  text-align: right;
}
table.products td,
table.products td+td+td+td {
  text-align: left;
}

Но, честно говоря, лучшая идея - использовать класс в каждой ячейке. Элемент col можно использовать для установки ширины, границы, фона или видимости столбца, но не любых других свойств. Причины, обсуждаемые здесь.

Ответ 3

Вы можете использовать псевдоселектор nth-child. Например:

table.align-right-3rd-column td:nth-child(3)
{
  text-align: right;
}

Затем в вашей таблице выполните:

<table class="align-right-3rd-column">
  <tr>
    <td></td><td></td><td></td>
    ...
  </tr>
</table>

Edit:

К сожалению, это работает только в Firefox 3.5. Однако, если ваша таблица содержит только 3 столбца, вы можете использовать селектор, который имеет гораздо лучшую поддержку браузера. Вот как выглядит таблица стилей:

table.align-right-3rd-column td + td + td
{
  text-align: right;
}

Это будет соответствовать любому столбцу, которому предшествуют два других столбца.

Ответ 4

Просматривая свой точный вопрос в своей подразумеваемой проблеме:

Шаг 1: используйте класс, как описано (или, если нужно, использовать встроенные стили).

Шаг 2: Включите сжатие GZIP.

Делает чудеса;)

Таким образом GZIP удаляет избыточность для вас (по проводам, в любом случае), и ваш источник остается совместимым с стандартом.

Ответ 5

Несколько лет назад (в IE только дни) я использовал тег <col align="right">, но я только что протестировал его и, похоже, только IE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Test</title>
</head>
<body>
    <table width="100%" border="1">
        <col align="left" />
        <col align="left" />
        <col align="right" />
        <tr>
            <th>ISBN</th>
            <th>Title</th>
            <th>Price</th>
        </tr>
        <tr>
            <td>3476896</td>
            <td>My first HTML</td>
            <td>$53</td>
        </tr>
    </table>
</body>
</html>

Отрывок из www.w3schools.com. Разумеется, его не следует использовать (если по какой-то причине вы действительно не нацелились на движок рендеринга IE), но я подумал, что было бы интересно упомянуть его.

Edit:

В целом, я не понимаю, как происходит отклонение этого тега. Это было бы очень полезно (по крайней мере, для ручной публикации HTML).

Ответ 6

Это не работает в IE6, что может быть проблемой, но оно будет работать в IE7 + и Firefox, Safari и т.д. Он выравнивает третий столбец справа и все последующие столбцы.

td + td + td { text-align: right; }
td + td + td + td { text-align: left; }

Ответ 7

Если у вас есть только два "вида" стилей столбцов, используйте один из них как TD и один как TH. Затем объявите класс для таблицы и подкласс для этой таблицы TH и TD. Тогда ваш HTML может быть суперэффективным.

Ответ 8

Что вы действительно хотите здесь:

<col align="right"/>

но похоже, что Gecko еще не поддерживает это: открытая ошибка более десятилетия.

(Geez, почему Firefox не может поддерживать достойные стандарты, такие как IE6?)

Ответ 9

Теги <colgroup> и <col>, которые находятся внутри таблиц, предназначены для этой цели. Если у вас три столбца в таблице и вы хотите выровнять третье, добавьте это после своего тэга <table>:

 <colgroup>
     <col />
     <col />
     <col class="your-right-align-class" />
 </colgroup>

вместе с требуемым CSS:

 .your-right-align-class { text-align: right; }

Из W3:

Определение и использование

  • Тег <col> определяет значения атрибутов для одного или нескольких столбцов в таблице.

  • Тег <col> полезен для применения стилей к целым столбцам вместо повторения стилей для каждой ячейки для каждой строки.

Ответ 10

Использовать jquery, чтобы применить класс ко всем tr ненавязчиво.

$( "table td" ). addClass ( "right-align-class" );

Используйте расширенные фильтры на td, если вы хотите выбрать конкретный td.

См. jquery