<style> /* Стили для контейнера вкладок */ .tabs {
position: relative; margin: 20px 0;
}
/* Скрываем оригинальные radio-кнопки */ .tabs input[type="radio"] {
position: absolute; opacity: 0; height: 0; width: 0;
}
/* Стили для заголовков вкладок */ .tabs label {
display: inline-block; padding: 12px 25px; margin-right: 5px; cursor: pointer; transition: all 0.3s ease; color: #ffffff; background: #8B0000; border: 1px solid #5d3954; border-bottom: none; border-radius: 5px 5px 0 0; position: relative; top: 1px; font-family: Arial, sans-serif; font-size: 14px;
}
/* Стили для активной вкладки */ .tabs input:checked + label {
background: #6A0000; color: #fff; border-color: #5d3954; z-index: 2;
}
/* Стили при наведении на неактивную вкладку */ .tabs label:hover {
background: #A60000;
}
/* Стили для контента вкладок */ .tab-content {
display: none; padding: 20px; border: 1px solid #5d3954; background: rgba(23, 32, 38, 1); color: white; border-radius: 0 5px 5px 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
/* Отображаем активный контент */ .tabs input:checked ~ .tab-content {
display: block;
}
/* Дополнительные стили для таблиц */ .wikitable {
border: 1px solid rgba(255,255,255,1); border-collapse: collapse; width: 100%; margin: 15px 0; font-weight: bold;
}
.wikitable th, .wikitable td {
border: 1px solid rgba(255,255,255,1); padding: 8px; text-align: left; background-color: rgba(23, 32, 38, 1);
}
.wikitable th {
color: white; background-color: #8B0000;
} </style>
<input type="radio" name="tabs" id="tab1" checked> <label for="tab1">Вкладка 1</label>
Заголовок | Таблицы |
---|---|
Стилизованная | Ячейка |
<input type="radio" name="tabs" id="tab2"> <label for="tab2">Вкладка 2</label>