Подсветка нечетных строк в таблице

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

Подсветка нечетных строк в таблице

Создайте обычную таблицу:

<!DOCTYPE html>
<html>
	<head>
		<title>Подсветка нечетных строк в таблице</title>
		<meta charset="utf-8">
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th>Первая ячейка</th>
					<th>Вторая ячейка</th>
					<th>Третья ячейка</th>
					<th>Четвертая ячейка</th>
					<th>Пятая ячейка</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Содержимое первой ячейки</td>
					<td>Содержимое второй ячейки</td>
					<td>Содержимое третьей ячейки</td>
					<td>Содержимое четвертой ячейки</td>
					<td>Содержимое пятой ячейки</td>
				</tr>
				<tr>
					<td>Содержимое первой ячейки</td>
					<td>Содержимое второй ячейки</td>
					<td>Содержимое третьей ячейки</td>
					<td>Содержимое четвертой ячейки</td>
					<td>Содержимое пятой ячейки</td>
				</tr>
				<tr>
					<td>Содержимое первой ячейки</td>
					<td>Содержимое второй ячейки</td>
					<td>Содержимое третьей ячейки</td>
					<td>Содержимое четвертой ячейки</td>
					<td>Содержимое пятой ячейки</td>
				</tr>
				<tr>
					<td>Содержимое первой ячейки</td>
					<td>Содержимое второй ячейки</td>
					<td>Содержимое третьей ячейки</td>
					<td>Содержимое четвертой ячейки</td>
					<td>Содержимое пятой ячейки</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

В голове документа между тегами <style>...</style> пропишите стили для таблицы:

table {
	border: 1px solid #ddd;
	width: 100%;
	border-collapse: collapse;
}
			
table thead th, table tbody td {
	border: 1px solid #ddd;
	padding: 5px 7px;
}

И для того, чтобы подсветить нечетные строки в таблице, мы допишем еще одну строчку:

table tbody tr:nth-child(odd) td {
	background-color: #f2f2f2;
}

Таким образом каждая нечетная строка в таблице будет выделяться установленным для нее цветом:

Работает во всех браузерах, в IE начиная с версии 9.0.

Смотреть пример

Источник: http://psd-html-css.ru/css-notes/podsvetka-nechetnyh-strok-v-tablice

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Подсветка нечетных строк в таблице | | 2012-04-30 22:49:00 | | Статьи Web-мастеру | | Есть множество уроков по созданию таблицы с подсветкой четных и нечетных строк, но в основном все они содержат jquery код. На самом деле такую таблицу можно сделать без использования скриптов. Нам | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: