В этом посте я буду использовать фрагмент кода CSS для создания простой отзывчивой таблицы с чередующимися рядами цветов. Я использовал их при создании таблиц лидеров для наших игр HTML5. Например, посмотрите таблицу лидеров Spooky Planet, которая является отзывчивой и имеет альтернативные строки цвета.
Узнайте как создать таблицу с полосой зебры с CSS. Базовая таблица имеет легкую прокладку и только горизонтальные разделители.
Обратите внимание, что здесь мы делаем очень простую отзывчивую таблицу, и этот фрагмент кода CSS может не подходить для больших таблиц, где все столбцы не могут вписаться в меньшую ширину. Если это так, то вы должны искать в другом месте для другого вида табличного дизайна, который может разбить данные отдельно или предоставить полосу прокрутки для небольших экранных устройств.
В этом примере мы предположим, что у вас есть простая таблица с несколькими столбцами (2-4) и вы хотите поместить всю таблицу по ширине экрана. Чтобы сделать это, все, что нам нужно сделать, это просто применить ширину: 100% к тегу таблицы.
HTML
Код
<h1><a href="http://zornet.ru/" target="_blank">ZorNet.Ru: Создание сайта uCoz<a/></h1>
<table>
<thead>
<tr>
<th>ZORNET.RU #1</th>
<th>ZORNET.RU #2</th>
<th>ZORNET.RU #3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Скрипты</td>
<td>Шаблоны</td>
<td>Дизайн</td>
</tr>
<tr>
<td>Скрипты</td>
<td>Шаблоны</td>
<td>Дизайн</td>
</tr>
<tr>
<td>Скрипты</td>
<td>Шаблоны</td>
<td>Дизайн</td>
</tr>
<tr>
<td>Скрипты</td>
<td>Шаблоны</td>
<td>Дизайн</td>
</tr>
</tbody>
</table>
CSS
Код
table {
width: 100%;
border-collapse: collapse;
background: #34495e;
color: #f3f3f3;
}
td, th {
padding: 8px;
text-align: left;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #16a085;
}
th {
background: #2c3e50;
font-weight: bold;
}
h1 a {
text-decoration: none;
color: #fff;
}
Как вы можете видеть, создание гибкой таблицы не очень сложно, если у вас небольшое количество столбцов в таблице.
