Как назначить класс для столбцов

Question

У меня около 100 строк, но я не хочу назначать класс abc1, abc2, abc3, abc4 индивидуально ...

Возможно автоматическое присвоение класса TD в зависимости от столбца, т.е. Столбец 1 - abc1 Колонка 2 - abc2 ..etc

<Table>
 <tr class="odd">
   <td class="abc1"> ...</td>
   <td class="abc2"> ...</td>
   <td class="abc3"> ...</td>
   <td class="abc4"> ...</td>
 </tr>

<tr class="even">
   <td class="abc1"> ...</td>
   <td class="abc2"> ...</td>
   <td class="abc3"> ...</td>
   <td class="abc4"> ...</td>
 </tr>

<tr class="odd">
   <td class="abc1"> ...</td>
   <td class="abc2"> ...</td>
   <td class="abc3"> ...</td>
   <td class="abc4"> ...</td>
 </tr>

</table>

Любая помощь приветствуется.

Хм ... Спасибо за все ответы, ребята .. Похоже, что нет способа сделать это через CSS. Да, я только добавил его на сервер html ... но я просто искал, могу ли я избежать этого.

Я не хочу делать это с помощью JavaScript. Спасибо за ответы, ребята, !!!!!!!!

Ценю вашу помощь.

Спасибо, Бен

Answer 1

Столбцы фактически поддерживаются в HTML и CSS с использованием тегов <colgroup> и <col>: см. http://htmldog.com/guides/htmladvanced/tables/
Добавьте это в начале вашего стола:

<table>
  <colgroup>
    <col class="class1" />
    <col class="class2" />
    <col class="class3" />
    <col class="class4" />
  </colgroup>
  ...
</table>

Answer 2

Вы можете сделать это с помощью Javascript или фреймворка, например jQuery , но, пройдя этот путь сам, я бы не стал. Причина в скорости: я делал нечетно-четную стилизацию строки с помощью jQuery, и загрузка страницы занимала где-то 100-500 мс (между этим и несколькими другими вещами). Это (imho) недопустимо долго для того, что можно сделать на сервере.

Если вы готовы с этим жить, тогда иди с этим. У CSS есть селектор: nth-child (n), но он не поддерживается в IE6. Лично я бы сгенерировал классы как часть HTML на стороне сервера.

С помощью jQuery вы можете сделать это:

<script type="text/javascript">
$(function() {
  $("table tbody tr :first-child").addClass("abc1");
  $("table tbody tr :nth-child(2)").addClass("abc2");
  // etc
});
</script>

Преимущество jQuery заключается в том, что он использует CSS2.1 и некоторые CSS3 и пользовательские селекторы, но ему не важно, что поддерживает браузер, поскольку он поддерживает то, что браузер не поддерживает.

Answer 3

Да - если вы используете серверный язык, такой как PHP или ASP.NET. Вот решение в PHP, предполагающее ровно 100 столбцов:

for( $i=0; $i < 100; $i++ )
{
    echo "<td class=\"abc$i\">your content here.</td>";
}

Поскольку PHP будет анализировать строки и вставлять литеральные значения переменных PHP, каждая итерация этого цикла будет увеличивать ваш класс на значение $ i, т.е.

Это выполнит то, что вы хотите. Тем не менее, я понимаю, что понятия не имею, что вы строите, но я ставлю под сомнение проектное решение, которое требует 100 столбцов, каждый из которых должен иметь свой стиль. Мне было бы интересно увидеть вашу окончательную реализацию.

KN

Answer 4

Есть теги col и colgroup xhtml.
Узнайте о них.

Также есть:

#your-table tr td:first-child     //will target first td
#your-table tr td:first-child+td //will target the all the second td
#your-table tr td:first-child+td+td //will target the all the thired td

вы получите дрейф

Answer 5

Не, если вы хотите использовать кросс-браузерное решение, но если поддержка Internet Explorer не является проблемой, вы можете использовать правило: nth-child. См. здесь и здесь . Вы также можете сделать это с помощью библиотеки JavaScript, такой как jQuery .