Чергувати колір рядка таблиці за допомогою CSS?

462

Я використовую таблицю з альтернативним кольором рядків із цим.

tr.d0 td {
  background-color: #CC9999;
  color: black;
}
tr.d1 td {
  background-color: #9999CC;
  color: black;
}

<table>
  <tr class="d0">
    <td>One</td>
    <td>one</td>
  </tr>
  <tr class="d1">
    <td>Two</td>
    <td>two</td>
  </tr>
</table>

Розгорніть фрагмент

Тут я використовую клас для tr, але хочу використовувати лише для table. Коли я використовую клас для таблиці, це стосується trальтернативи.

Чи можу я так написати свій HTML за допомогою CSS?

<table class="alternate_color">
    <tr><td>One</td><td>one</td></tr>
    <tr><td>Two</td><td>two</td></tr>
    </table>

Як я можу зробити так, щоб рядки мали "смужки зебри" за допомогою CSS?

html css html-table

— Калі Чаран Раджпут
джерело

1

Я створив демонстрацію, використовуючи всі можливі шаблони для nth-child () - xengravity.com/demo/nth-child

— xengravity

760

$(document).ready(function()
{
  $("tr:odd").css({
    "background-color":"#000",
    "color":"#fff"});
});

tbody td{
  padding: 30px;
}

tbody tr:nth-child(odd){
  background-color: #4C8BF5;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>13</td>
</tr>
</tbody>
</table>

Розгорніть фрагмент

Є CSS-селектор, насправді псевдоселектор, який називається nth-child. У чистому CSS ви можете зробити наступне:

tr:nth-child(even) {
    background-color: #000000;
}

Примітка: В IE 8 немає підтримки.

Або якщо у вас є jQuery:

$(document).ready(function()
{
  $("tr:even").css("background-color", "#000000");
});

— Рассел Діас
джерело

чи можливо також змінити колір гіперпосилання альтернативних рядків. Я хочу різного кольору гіперпосилання для парного рядка та іншого для непарного. Спасибі

— عثمان غني

4

Чудова відповідь! Але тільки для інформації є ще один CSS-селектор, який можна використовувати, тобто. tr:nth-of-type(odd/even)

— Нікіл Нанджаппа

2

@ عثمانغني: Так, ви просто зробили бtr:nth-child(even) a

— Джерард

1

Не працює, якщо ви пишете свій html динамічно. Потім вам потрібно додати класи до рядків.

— Ерік

У 2019 році: це вже не найкраще рішення. Використовуйте чистий CSS .

— Chiramisu

158

У вас є :nth-child()псевдоклас:

table tr:nth-child(odd) td{
    ...
}
table tr:nth-child(even) td{
    ...
}

У перші дні підтримка :nth-child()його браузера була поганою. Ось чому налаштування class="odd"стала такою поширеною технікою. Наприкінці 2013 року я радий сказати, що IE6 та IE7 нарешті мертві (або досить хворі, щоб перестати дбати), але IE8 все ще існує - на щастя, це єдиний виняток.

— Альваро Гонсалес
джерело

3

Бажана відповідь, оскільки вона не застосовується до заголовка CSS

— Майк

Привіт, це пізно на пару років, але що робити з додаванням вибраного класу з bg-кольором з jqeury до рядка таблиці при натисканні на нього. Я помітив, що bg-колір псевдокласу nth-child переосмислює, коли ви додаєте "вибраний" клас з jqeury

— dutchkillsg

@dutchkillsg Це, мабуть, зовсім нове питання, а не коментар до моєї відповіді ...

— Альваро Гонсалес

Для "смуг зебри" (тобто вертикальних) просто обмінюйтесь tr:nth-child(odd)на td:nth-of-type(odd). Зауважте, що в цьому випадку ви застосовуєте інший псевдоклас, tdа не trелементи.

— Chiramisu

36

Просто додайте наступне до свого html-коду (за допомогою <head>), і ви закінчите.

HTML:

<style>
      tr:nth-of-type(odd) {
      background-color:#ccc;
    }
</style>

Легше і швидше, ніж приклади jQuery.

— bmich72
джерело

Це має бути прийнятою відповіддю. Наскільки це можливо, CSS повинен керувати стилізацією, тоді як javascript можна використовувати для вирішення інших питань.

— Tormod Haugene

Я не роблю html щодня. #cccмені не здається дійсним кольоровим кодом. Ви можете пояснити? Дякую.

— tommy.carstensen

1

@ tommy.carstensen це називається "скороченою шістнадцятковою формою". В основному це #cccрозширюється до #cccccc, що означає, що кожен колір RGB має шістнадцяткове значення ccабо десяткове значення 204(тобто rgb(204, 204, 204)). Детальніше про це читайте тут -> en.wikipedia.org/wiki/Web_colors#Shorthand_hexadecimal_form

— Nick Grealy

Не працює у версії Chrome 78.0.3904.108

— IlludiumPu36

13

Чи можу я написати свій html так із використанням css?

Так, ви можете, але тоді вам доведеться використовувати :nth-child()псевдоселектор (який має обмежену підтримку):

table.alternate_color tr:nth-child(odd) td{
   /* styles here */
}
table.alternate_color tr:nth-child(even) td{
   /* styles here */
}

— Сарфраз
джерело

13

Ми можемо використовувати непарні і парні правила CSS та метод jQuery для альтернативних кольорів рядків

Використання CSS

table tr:nth-child(odd) td{
           background:#ccc;
}
table tr:nth-child(even) td{
            background:#fff;
}

Використання jQuery

$(document).ready(function()
{
  $("table tr:odd").css("background", "#ccc");
  $("table tr:even").css("background", "#fff");
});

table tr:nth-child(odd) td{
           background:#ccc;
}
table tr:nth-child(even) td{
            background:#fff;
}

<table>
  <tr>
    <td>One</td>
    <td>one</td>
   </tr>
  <tr>
    <td>Two</td>
    <td>two</td>
  </tr>
</table>

Розгорніть фрагмент

— Сантош Халсе
джерело

10

Більшість наведених вище кодів не працюватиме з версією IE. Це рішення для IE + інших браузерів.

   <style type="text/css">
      tr:nth-child(2n) {
             background-color: #FFEBCD;
        }
</style>

— Шріванта Аттанаяке
джерело

9

<script type="text/javascript">
$(function(){
  $("table.alternate_color tr:even").addClass("d0");
   $("table.alternate_color tr:odd").addClass("d1");
});
</script>

— Пранай Рана
джерело

46

Гаразд, я знаю, що jQuery на цьому сайті є доволі поширеним, але незалежно від того, ви не повинні публікувати jQuery без пояснень. Цей сценарій не працюватиме самостійно.

— НезадоволенняЗахист

4

Ви можете використовувати селектори nth-child (непарні / непарні), проте не всі браузери ( тобто 6-8, ff v3.0 ) підтримують ці правила, тому більшість рішень повертаються до якоїсь форми javascript / jquery для додавання класів до рядки для цих невідповідних браузерів, щоб отримати ефект смуга тигра.

— червоний квадрат
джерело

3

Існує досить простий спосіб зробити це в PHP, якщо я розумію ваш запит, я вважаю, що ви кодуєте в PHP, і ви використовуєте CSS та javascript для посилення виводу.

Динамічний висновок із бази даних несе цикл for iterate через результати, які потім завантажуються в таблицю. Просто додайте виклик функції так:

echo "<tr style=".getbgc($i).">";  //this calls the function based on the iteration of the for loop.

потім додайте функцію на сторінку або файл бібліотеки:

function getbgc($trcount)
{

$blue="\"background-color: #EEFAF6;\"";
$green="\"background-color: #D4F7EB;\"";
$odd=$trcount%2;
    if($odd==1){return $blue;}
    else{return $green;}

}

Тепер це буде динамічно чергуватися між кольорами у кожному новоствореному рядку таблиці.

Це набагато простіше, ніж возитися з CSS, який працює не у всіх браузерах.

Сподіваюсь, це допомагає.

— позначка
джерело

дякую @mark. Не виправити, що сайт буде в PHP, .net або простому HTML.

— Kali Charan Rajput