Зебра css: Таблица зебра на CSS – CSS таблица зебра

CSS таблица зебра

Привет, друзья. Я заметил, что на мой блог стали приходить люди по запросу: CSS таблица зебра, но до этого момента именно этого материала у меня не было. Бала немного другая статья, на тему создания красивой таблицы CSS и сейчас будем исправлять ситуацию, чтобы предоставить пользователю именно ту информацию, которую он ищет. Я еще в 2011 году задался вопросом, как вставить таблицу на страницу WordPress блога и нашел для этого дела специальный плагин. Но спустя какое-то время стал избавляться от плагинов и оказалось, что таблицы можно делать при помощи CSS.

Вот реальный пример CSS таблицы зебры:

Из-за того, что строки таблицы имеют разный цвет, ее называют зеброй. Цвет, кстати, можно сделать любой. Когда я делал эту таблицу, то применил к ней еще псевдокласс hover для того, чтобы при наведении на определенный пункт, он подсвечивался. мне кажется, что так смотрится гораздо лучше. И CSS кода для такой таблицы нужен самый минимум. Вот он:

1
2
3
4
5

.wp-table{width: 450px; margin: 0 auto; border-collapse: collapse;
font-size:13px; font-family:arial; color:#333;}
.wp-table td{border: 1px solid #666;}
.wp-table tr:nth-child(odd){background:#E6EEEE;}
.wp-table tr:hover{background:#999; color:#fff; text-shadow:1px 1px 1px #333;}

.wp-table{width: 450px; margin: 0 auto; border-collapse: collapse; font-size:13px; font-family:arial; color:#333;} .wp-table td{border: 1px solid #666;} .wp-table tr:nth-child(odd){background:#E6EEEE;} .wp-table tr:hover{background:#999; color:#fff; text-shadow:1px 1px 1px #333;}

Таблица на странице выглядит так:

1
2
3
4
5
6
7
8
9
10
11
12

<table>
<tr>
<td>№1</td>
<td>Продукт 1</td>
<td>$5</td>
</tr>
<tr>
<td>№2</td>
<td>Продукт 2</td>
<td>$5</td>
</tr>
</table>

<table> <tr> <td>№1</td> <td>Продукт 1</td> <td>$5</td> </tr> <tr> <td>№2</td> <td>Продукт 2</td> <td>$5</td> </tr> </table>

таким образом, эту css таблицу зебру можно вставлять на любой сайт, не только на WordPress. Я подготовил для вас пример, который вы можете скачать прямо сейчас и уже спокойно разобраться, что к чему. Можно изменить ширину таблицы, сейчас она 450 пикс. Так же можно изменить цвета строк по своему усмотрению.

СКАЧАТЬ

Создаем «таблицу-зебру» | Vavik96

Таблица-зебра – это такая таблица, в которой после каждой строчки изменяется цвет фона строки. То есть, к примеру, белый-черный-белый-черный… Это то и сделаем, используя лишь CSS.

 Для создания “зебры” в таблице, можно воспользоваться JS. Но, такой метод будет довольно хлопотный. Можно создать “зебру” вручную, то есть ручками добавлять классы к тегу <tr>. Такой способ подойдет для небольших таблиц. А что, если строчек в таблице много? То тогда без автоматизирования будет долго. А что бы не пользоваться JS, можно использовать псевдокласс

Данный псевдокласс было создан для добавления свойств тегу, идущему под определенным номером. Можно задать, что бы свойства задавались лишь четным или нечетным тегам. В основном данный псевдокласс можно применить именно то что в таблицах. Правила написания:nth-child:

селектор:nth-child(значение) {
...
}

Значениями могут быть:

odd – нечетные числа (1, 3, 5, 7 …).
even – четные числа (2, 4, 5, 6 …).
число – любое число от одного.

Но у данного метода есть минус: он не поддерживается в старых браузерах.

И, что бы создать стиль “зебры” в таблице, нужно сделать следующие:

HTML

<table cellspacing="0">
<tr><th>N</th><th>Страна</th><th>Население (тыс. человек)</th></tr>
<tr><td>1</td><td>Китай</td><td>1 338 613,0</td></tr>
<tr><td>2</td><td>Индия</td><td>1 166 079,2</td></tr>
<tr><td>3</td><td>США</td><td>307 212.1</td></tr>
<tr><td>4</td><td>Индонезия</td><td>240 271.5</td></tr>
<tr><td>5</td><td>Бразилия</td><td>198 739.3</td></tr>
</table>

Атрибут cellspacing определяет, сколько нужно отступить между ячейками. 0 – отменяет отступы.

CSS

table tr:nth-child(odd) {
background-color:#EDEDED; /* Цвет фона */
}

Этим мы задали, что если тег <tr> будет по счету нечетный, то ему будет задан цвет фона #EDEDED. Так же можно поступить и с четными.

Оформим нашу таблицу дальше:

table, tr, td, th {
color:#969799; /* Цвет текста */
font:13pt Andale Mono, monospace; /* Размер, тип шрфита */
border:1px solid #E9E9E9; /* Обводка */
border-collapse:collapse;    /* Убираем двойную обводку между ячейками */
}
td, th {
padding:5px;    /* Внутренний отступ */
}
th {
font-weight:bold;
background-color:#E5E5E5;    /* Цвет фона */
}

Источник

CSS таблица зебра ~ Страницы Интернета

Вот реальный пример CSS таблицы зебры:

1
2
3
4
5

.wp-table{width: 450px; margin: 0 auto; border-collapse: collapse;
font-size:13px; font-family:arial; color:#333;}
.wp-table td{border: 1px solid #666;}
.wp-table tr:nth-child(odd){background:#E6EEEE;}
.wp-table tr:hover{background:#999; color:#fff; text-shadow:1px 1px 1px #333;}

Таблица на странице выглядит так:

1
2
3
4
5
6
7
8
9
10
11
12

<table>
<tr>
<td>№1</td>
<td>Продукт 1</td>
<td>$5</td>
</tr>
<tr>
<td>№2</td>
<td>Продукт 2</td>
<td>$5</td>
</tr>
</table>

таким образом, эту css таблицу зебру можно вставлять на любой сайт, не только на WordPress. Я подготовил для вас пример, который вы можете скачать прямо сейчас и уже спокойно разобраться, что к чему. Можно изменить ширину таблицы, сейчас она 450 пикс. Так же можно изменить цвета строк по своему усмотрению.

Универсальный полосатик

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

Пример универсального стиля Zебра. Для всех дочерних элементов первого уровня делает фон полосатый, т.е. для первого – белый, для второго – серый, для третьего – белый, для четвертого – серый и т.д.

Пример с DIV-ами

1. Это первый div

Это первый вложенный абзац

Это первый вложенный div

Это второй вложенный div

2. Это второй div

3. Это третий div

4. Это четвертый div

5. Это пятый абзац

6. Это шестой абзац

Пример с таблицей

Исходный код этого примера:

<style type="text/css">
	.polosatik > *:nth-child(even),
	.polosatik tr:nth-child(even) 
	{background: #ccc;}
</style>

<p>Пример универсального стиля Zебра. Для всех дочерних элементов первого уровня делает фон полосатый,
    т.е. для первого – белый, для второго – серый, для третьего – белый, для четвертого – серый и т.д.</p>
<h5>Пример с DIV-ами</h5>
<div>
	<div>
		<p>1. Это первый div</p>
		<p>Это первый вложенный абзац</p>
		<div>
			<p>Это первый вложенный div</p>
		</div>
		<div>
			<p>Это второй вложенный div</p>
		</div>
	</div>
	<div>
		<p>2. Это второй div</p>
	</div>
	<div>
		<p>3. Это третий div</p>
	</div>
	<div>
		<p>4. Это четвертый div</p>
	</div>
	<p>5. Это пятый абзац</p>
	<p>6. Это шестой абзац</p>
</div>
<h5>Пример с таблицей</h5>
<table>
    <tr><td>Это перавя строка таблицы</td></tr>
    <tr><td>Это вторая строка таблицы</td></tr>
    <tr><td>Это третья строка таблицы</td></tr>
    <tr><td>Это четвертая строка таблицы</td></tr>
</table>

Зебра полосатая таблица со скрытыми строками с помощью CSS3?

Here’s as close as you’re going to get. Note that you can’t make the nth-child count only displayed rows; nth-child will take the nth child element no matter what, not the nth child that matches a given selector. If you want some rows to be missing and not affect the zebra-striping, you will have to remove them from the table entirely, either through the DOM or on the server side.

<!DOCTYPE html>
<style>
#mytable tr:nth-child(odd) { 
         background-color:  #000;  
    }
#mytable tr:nth-child(even) { 
         background-color:  #FFF;
    }
</style>
<table>
       <tr><td>&nbsp;</td></tr>
       <tr><td>&nbsp;</td></tr>
       <tr><td>&nbsp;</td></tr>
       <tr><td>&nbsp;</td></tr>
       <tr><td>&nbsp;</td></tr>
       <tr><td>&nbsp;</td></tr>
    </table>

Here are the fixes that I made:

 table #mytable tr[@display=block]:nth-child(odd) { 
         background-color:  #000;  
    }

There’s no need to specify an ancestor selector for an id based selector; there is only ever one element that will match #table, so you’re just adding extra code by adding the table in.

 #mytable tr[@display=block]:nth-child(odd) { 
         background-color:  #000;  
    }

Now, [@display=block] would match elements which had an attribute display set to block, such as <tr display=block>. Display isn’t a valid HTML attribute; what you seem to be trying to do is to have the selector match on the style of the element, but you can’t do that in CSS, since the browser needs to apply the styles from the CSS before it can figure that out, which it’s in the process of doing when it’s applying this selector. So, you won’t be able to select on whether table rows are displayed. Since nth-child can only take the nth child no matter what, not nth with some attribute, we’re going to have to give up on this part of the CSS. There is also nth-of-type, which selects the nth child of the same element type, but that’s all you can do.

 #mytable tr:nth-child(odd) { 
         background-color:  #000;  
    }

And there you have it.