Style Table Bootstrap SlateGray / Элементы / Сниппеты Bootstrap

Версия: v1.0

Каталог: Сниппеты Bootstrap

Категория: Элементы

Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Уникальный ID: 1334

Количество символов:

Посмотрели: 2409 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 1 голосов

Тип лицензии: CC BY 4.0

Авторство: https://goo.gl/VJu5Q2

Информация: Пользователям

Информация: Правообладателям

Теги: Responsive, SlateGray, Snippet, html, Style, table, Bootstrap

Поделился: BootstrapТема

Добавлено: 2016-10-16 в 20:45

Метка: 1581095104

⇄ ⇅

.table-wrap {
 max-width: 1000px;
 margin: 0 auto;
}
.table {
 border: 5px solid SlateGray;
}
@-moz-document url-prefix() {
 fieldset {
 display: table-cell;
 }
}
tr:nth-child(odd) {
 background: WhiteSmoke;
}
thead tr {
 background: SlateGray !important;
 color: WhiteSmoke;
}
tfoot tr {
 background: SlateGray !important;
 color: WhiteSmoke;
}
td, th {
 padding-top: 1em !important;
 padding-bottom: 1em !important;
 border: 0px !important;
 vertical-align: middle !important;
}
tfoot td, tfoot th {
 padding: 1em !important;
}
th {
 font-family: 'Black Ops One', cursive;
}
tr {
 font-family: 'Boogaloo', cursive;
 font-size: 1.5em;
 color: SlateGray;
}
tr td:nth-child(1) {
 padding-left: 1.5em !important;
}
tr td:nth-child(2) {
 padding-left: 0em !important;
}
tr td:nth-child(3) {
 text-align: right;
 width: 60%;
 padding-right: 1.5em !important;
}
tr th:nth-child(1) {
 padding-left: 1.5em !important;
}
tr th:nth-child(2) {
 padding-left: 0em !important;
}
tr th:nth-child(3) {
 text-align: right;
 width: 20%;
 padding-right: 1.5em !important;
}
.circle {
 font-family: 'Black Ops One', cursive;
 font-size: 1.5em;
 width: 45px !important;
 height: 45px !important;
 background: DimGray;
 color: white;
 display: table-cell;
 vertical-align: middle;
 text-align: center;
 border-radius: 100%;
}
.first {
 background: Coral;
}
.second {
 background: Goldenrod;
}
.third {
 background: Grey;
}
</style>

<table class="table">
 <thead>
 <tr>
 <th>RANK </th>
 <th colspan="2">PLAYER</th>
 <th>TIME</th>
 </tr>
 </thead>
 <tfoot>
 <tr>
 <th>RANK</th>
 <th colspan="2">USERNAME</th>
 <th>TIME</th>
 </tr>
 </tfoot> 
 <tbody>
 <tr>
 <td>
 <div class="circle first">
 1
 </div>
 </td>
 <td colspan="2">Marcus</td>
 <td>01:45:35</td>
 </tr>
 <tr>
 <td>
 <div class="circle second">
 2
 </div>
 </td>
 <td colspan="2">Marcus John</td>
 <td>05:35</td>
 </tr>
 <tr>
 <td>
 <div class="circle third">
 3
 </div>
 </td>
 <td colspan="2">Marcus John Hall</td>
 <td>45:35</td>
 </tr>
 <tr>
 <td>
 <div class="circle">
 4
 </div>
 </td>
 <td colspan="2">Marcus John Hall</td>
 <td>45:35</td>
 </tr> 
 <tr>
 <td>
 <div class="circle">
 5
 </div>
 </td>
 <td colspan="2">Marcus John Hall</td>
 <td>45:35</td>
 </tr> 
 <tr>
 <td>
 <div class="circle">
 6
 </div>
 </td>
 <td colspan="2">Super Long username</td>
 <td>45:35</td>
 </tr> 
 </tbody>
 </table>

</div>
 </div>

</div>
</div>

BootstrapTema

Style Table Bootstrap SlateGray

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0