Лучший способ выровнять по правому краю текст в HTML-таблице
Если Вы имеете хвост GNU в наличии в своей системе, можно сделать следующее:
tail -n +1000001 huge-file.log
Это + символ, который делает то, что Вы хотите. Заключить в кавычки из страницы справочника:
, Если первый символ K (число байтов или строк) '+', печать, начинающаяся с объекта Kth от запуска каждого файла.
Таким образом, как отмечено в комментарии, помещая +1000001 начинает печатать с первым объектом после первых 1 000 000 строк.
8 ответов
Чтобы напрямую ответить на ваш вопрос: нет . Нет более простого способа добиться единообразия во всех современных браузерах без повторения класса в столбце. (Хотя, см. Ниже 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 прекрасен, но если вы хотите единообразного внешнего вида , Это'
Вы можете использовать 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>
Изменить:
К сожалению, это работает только в Firefox 3.5. Однако, если в вашей таблице всего 3 столбца, вы можете использовать родственный селектор, который гораздо лучше поддерживает браузер. Вот как будет выглядеть таблица стилей:
table.align-right-3rd-column td + td + td
{
text-align: right;
}
Это будет соответствовать любому столбцу, которому предшествуют два других столбца.
Если это всегда третий столбец, вы можете использовать его (при условии, что класс таблицы "продукты"). Это вроде как хакерство и ненадежно, если вы добавите новый столбец.
table.products td+td+td {
text-align: right;
}
table.products td,
table.products td+td+td+td {
text-align: left;
}
Но, честно говоря, лучшая идея - использовать класс для каждой ячейки. Вы можете использовать элемент col , чтобы установить ширину, границу, фон или видимость столбца, но не любые другие свойства. Причины, обсуждаемые здесь .
Просматривая ваш точный вопрос к вашей подразумеваемой проблеме:
Шаг 1. Используйте класс, как вы описали (или, если необходимо , используйте встроенные стили).
Шаг 2: Включите сжатие GZIP.
Творит чудеса;)
Таким образом, GZIP устраняет для вас избыточность (во всяком случае, по сети), и ваш источник остается совместимым со стандартами.
Несколько лет назад (в IE всего несколько дней) я использовал , но я только что протестировал его, и, похоже, это только функция 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), но я подумал, что было бы интересно упомянуть об этом.
Изменить:
- IE по-прежнему поддерживает его .
- Firefox отказался от поддержки в 3.5 .
- Safari, похоже, не поддерживает его, но в документации указано иное .
В целом, я не Я не понимаю причины отказа от этого тега. Это могло бы быть очень полезно (по крайней мере, для ручной публикации HTML).
но я подумал, что было бы интересно упомянуть об этом.Изменить:
- IE по-прежнему поддерживает его .
- Firefox прекратил поддержку в версии 3.5 .
- Safari похоже, не поддерживает его, но в документации указано иное .
В целом, я не понимаю причины отказа от этого тега. Это могло бы быть очень полезно (по крайней мере, для ручной публикации HTML).
но я подумал, что было бы интересно упомянуть об этом.Изменить:
- IE по-прежнему поддерживает его .
- Firefox отказался от поддержки в версии 3.5 .
- Safari похоже, не поддерживает его, но в документации указано иное .
В целом, я не понимаю причины отказа от этого тега. Это может оказаться очень полезным (по крайней мере, для ручной публикации HTML).
Это не работает в IE6, что может быть проблемой, но будет работать в IE7 + и Firefox, Safari и т. Д. Он выровняет третий столбец вправо и все последующие столбцы слева.
td + td + td { text-align: right; }
td + td + td + td { text-align: left; }
Используйте jquery для ненавязчивого применения класса ко всем tr.
$ ("table td"). AddClass ("right-align-class ″);
Используйте расширенные фильтры на td в случае, если вы хотите выбрать конкретный td.
См. jquery
Вот что вам действительно нужно:
<col align="right"/>
но похоже, что Gecko еще не поддерживает это: это открытая ошибка более десяти лет .
(Боже, а почему Firefox не может поддерживать достойные стандарты, такие как IE6?)