Узнайте как сделать сравнительную таблицу при помощи CSS.
Функции | Базовый | Продвинутый |
---|---|---|
Какой-то текст | ||
Какой-то текст | ||
Какой-то текст | ||
Какой-то текст | ||
Какой-то текст |
Как сделать сравнительную таблицу
Шаг 1) Добавляем HTML:
Пример
<!-- Библиотека иконок Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<table>
<tr>
<th style="width:50%">Функции</th>
<th>Базовый</th>
<th>Продвинутый</th>
</tr>
<tr>
<td>Какой-то текст</td>
<td><i class="fa fa-remove"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td>Какой-то текст</td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
</table>
Шаг 2) Добавляем CSS:
Пример
/* Стили таблицы */
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
/* Стили заголовков и данных таблицы */
th, td {
text-align: center;
padding: 16px;
}
th:first-child, td:first-child {
text-align: left;
}
/* Цветовое чередование строк таблицы */
tr:nth-child(even) {
background-color: #f2f2f2
}
.fa-check {
color: green;
}
.fa-remove {
color: red;
}
Попробовать самому »