- Регист
- 14 Сен 2016
- Сообщения
- 0
- Реакции
- -3
Одна и та же таблица в Объекте HTM и Текстовом объекте может выглядеть по разному.
Основной код таблицы
Стили для таблицы
Получаем результат
Основной код таблицы
Код:
<table>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
<tr>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
</table>
Стили для таблицы
Код:
table {
width: 100%; /* Ширина таблицы */
border-collapse: collapse !important; /* Отображать только одинарные линии */
}
th {
text-align: center !important; /* Выравнивание по центру background: #005FBF; /* Цвет фона ячеек */
padding: 5px; /* Поля вокруг содержимого ячеек */
border: 1px solid black !important; /* Граница вокруг ячеек */
font: 12px Tahoma;
color: #FFF;
font-weight: bold;
}
td {
text-align: left !important; /* Выравнивание по левому краю */
padding: 5px !important; /* Поля вокруг содержимого ячеек */
border: 1px solid black !important; /* Граница вокруг ячеек */
font: 10px Tahoma;
}
tr:nth-child(2n) {
background-color: #FFF;
}
tr:nth-child(2n+1) {
background-color: #AAD4FF;
}
Получаем результат