Адаптивная таблица
В наше время , время мобильности, адаптивности иногда приходится выкручиваться и идти на некие уловки. Так же приходится подстраивать сайты для разных разрешений экранов, так как всё больше и больше народу используют мобильные гаджеты!
Я долго искал решение для своего проекта . На сайте должны были использоваться таблицы , а так как сайт адаптивный то и таблица должна была выглядеть соответствующе.
Решение было найдено на просторах интернета , установка заключается в следующем в папку стилей вставляем следующий код:
body {
font-family: arial;
}
table {
border: 2px solid #000000;
width: 100%;
margin: 0;
padding: 0;
border-collapse: collapse;
border-spacing: 0;
}
table tr {
border: 2px solid #000000;
padding: 5px;
}
table th,
table td {
padding: 10px;
text-align: center;
border-bottom:solid 2px #000000;
border-right:solid 2px #000000;
}
table th {
text-transform:inherit ;
font-size: 14px;
letter-spacing: 1px;
}
@media screen and (max-width: 600px) {
table {
border: 0;
}
table thead {
display: none;
}
table tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
}
table td {
display: block;
text-align: right;
font-size: 13px;
border-bottom: 1px dotted #ccc;
}
table td:last-child {
border-bottom: 0;
}
table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}
Ну а сам HTML код таблицы выглядит так:
<table>
<thead>
<tr align="center" height="50px;" bgcolor="#ECECEC">
<th> <span style="font-weight:bold">Кран Ripple </span></th>
<th><span style="font-weight:bold">Количество (XRP) </span></th>
<th><span style="font-weight:bold">Время (мин)</span></th>
<th><span style="font-weight:bold">Куда выплата</span></th>
<th><span style="font-weight:bold">Min на вывод (XRP)</span></th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Ripple кран"><a href="https://coinfaucet.io/Account?r=g9bNaMJ7iIc"
rel="nofollow" target="_blank" class="kran">coinfaucet</a></td>
<td data-label="Количество (XRP)">0,0001-1</td>
<td data-label="Время (мин)">60</td>
<td data-label="Куда выплата"><span style="color:#009900">на кошелек</span></td>
<td data-label="Min на вывод (XRP)">1</td>
</tr>
<tr>
<td data-label="Ripple кран"><a href="http://xrpfaucet.info/ref/rB1za2ZVgDnNB7u8LbVN61k5nCByBUtXCA"
rel="nofollow" target="_blank" class="kran">xrpfauce</a></td>
<td data-label="Количество (XRP)">0,0005-1</td>
<td data-label="Время (мин)">60</td>
<td data-label="Куда выплата"><span style="color:#009900">на кошелек</span></td>
<td data-label="Min на вывод (XRP)">0.5</td>
</tr>
<tr>
<td data-label="Ripple кран"><a href="https://www.eobot.com/new.aspx?referid=930782"
rel="nofollow" target="_blank" class="kran">eobot</a></td>
<td data-label="Количество (XRP)">0,0001</td>
<td data-label="Время (мин)">1440</td>
<td data-label="Куда выплата"><span style="color:#009900">на кошелек</span></td>
<td data-label="Min на вывод (XRP)">0</td>
</tr>
</tbody>
</table>
Табличку настраиваем под свои нужды.
Поддержка браузерами | |||||
---|---|---|---|---|---|
элемент | |||||
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Облако тегов
Bootstrap bootstrap css CSS CSS3 DLE dle fruit farm html html шаблон html5 HTML5 Payeer PNG PSD wap Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг меню модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
Оцените сайт