| Kosten | Среда, 06 Июня 2018, 22:24 | Сообщение 1 |
| Здесь вероятно не будет тайной, что таблица для любого верстальщика, это что-то, что время много заберет на ее создание. Так как по сути ее сложно адаптировать под мобильные аппараты, но также довольно легко на ней можно разместить информацию, что будет понятна тем кто ее читает. Вашему вниманию, здесь представлена простая по структуре таблица, которая отрывчатая, или адаптивная на все мобильные носители, также идет в несколько оттенков цвета.
Когда мы рассмотрели различные реализации гибких таблиц в Интернете, мы увидели много интересных идей, но мы не думали, что это действительно отличная реализация.
Имея в виду эти существующие трюки, мы решили разработать это, компилятор CSS, который использует существующие таблицы и модифицирует их для небольших устройств, чтобы они соответствовали нашим критериям. Он работает, беря первый столбец и «закрепляя» его слева от таблицы, позволяя прокручивать другие столбцы под ним. Вы не теряете вероятный ключ для каждой строки, но вам также не нужно нарушать ваш хороший отзывчивый макет.
HTML
Код <div class="stuzormutes"> <h1>ZorNet.Ru: Создание сайта uCoz</h1> <table class="kilopaqegunas"> <tbody> <tr> <th>Supplier Code</th> <th>Supplier Name</th> <th>Invoice Number</th> <th>Invoice Date</th> <th>Due Date</th> <th>Net Amount</th> </tr> <tr> <td data-th="Supplier Code"> UPS5005 </td> <td data-th="Supplier Name"> UPS </td> <td data-th="Invoice Number"> ASDF19218 </td> <td data-th="Invoice Date"> 06/25/2016 </td> <td data-th="Due Date"> 12/25/2016 </td> <td data-th="Net Amount"> $8,322.12 </td> </tr> <tr> <td data-th="Supplier Code"> UPS3449 </td> <td data-th="Supplier Name"> UPS South Inc. </td> <td data-th="Invoice Number"> ASDF29301 </td> <td data-th="Invoice Date"> 6/24/2016 </td> <td data-th="Due Date"> 12/25/2016 </td> <td data-th="Net Amount"> $3,255.49 </td> </tr> <tr> <td data-th="Supplier Code"> B6467 </td> <td data-th="Supplier Name"> BOX ZORNET.RU </td> <td data-th="Invoice Number"> AS65658 </td> <td data-th="Invoice Date"> 656788 </td> <td data-th="Due Date"> 56545656 </td> <td data-th="Net Amount"> 7877888 </td> </tr> <tr> <td data-th="Supplier Code"> PA ZORNET.RU </td> <td data-th="Supplier Name"> ZORNET.RU-75657. </td> <td data-th="Invoice Number"> AS97899 </td> <td data-th="Invoice Date"> 866868 </td> <td data-th="Due Date"> 867878 </td> <td data-th="Net Amount"> 8878789 </td> </tr> </tbody> </table> <h3>Resize Me</h3> </div>
CSS
Код .kilopaqegunas {
margin: auto;
min-width: 300px;
max-width: 100%;
border-collapse: collapse;
}
.kilopaqegunas tr:first-child {
border-top: none;
background: #428bca;
color: #fff;
}
.kilopaqegunas tr {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background-color: #f5f9fc;
}
.kilopaqegunas tr:nth-child(odd):not(:first-child) {
background-color: #ebf3f9;
}
.kilopaqegunas th {
display: none;
}
.kilopaqegunas td {
display: block;
}
.kilopaqegunas td:first-child {
margin-top: .5em;
}
.kilopaqegunas td:last-child {
margin-bottom: .5em;
}
.kilopaqegunas td:before {
content: attr(data-th) ": ";
font-weight: bold;
width: 120px;
display: inline-block;
color: #000;
}
.kilopaqegunas th,
.kilopaqegunas td {
text-align: left;
}
.kilopaqegunas {
color: #333;
border-radius: .4em;
overflow: hidden;
}
.kilopaqegunas tr {
border-color: #bfbfbf;
}
.kilopaqegunas th,
.kilopaqegunas td {
padding: .5em 1em;
}
@media screen and (max-width: 601px) {
.kilopaqegunas tr:nth-child(2) {
border-top: none;
}
}
@media screen and (min-width: 600px) {
.kilopaqegunas tr:hover:not(:first-child) {
background-color: #d8e7f3;
}
.kilopaqegunas td:before {
display: none;
}
.kilopaqegunas th,
.kilopaqegunas td {
display: table-cell;
padding: .25em .5em;
}
.kilopaqegunas th:first-child,
.kilopaqegunas td:first-child {
padding-left: 0;
}
.kilopaqegunas th:last-child,
.kilopaqegunas td:last-child {
padding-right: 0;
}
.kilopaqegunas th,
.kilopaqegunas td {
padding: 1em !important;
}
}
/* THE END OF THE IMPORTANT STUFF */
/* Basic Styling */
body {
background: #4B79A1;
background: -webkit-linear-gradient(to left, #4B79A1 , #283E51);
background: linear-gradient(to left, #4B79A1 , #283E51);
}
h1 {
text-align: center;
font-size: 2.4em;
color: #f2f2f2;
}
.stuzormutes {
display: block;
text-align: center;
}
h3 {
display: inline-block;
position: relative;
text-align: center;
font-size: 1.5em;
color: #cecece;
}
h3:before {
content: "\25C0";
position: absolute;
left: -50px;
-webkit-animation: leftRight 2s linear infinite;
animation: leftRight 2s linear infinite;
}
h3:after {
content: "\25b6";
position: absolute;
right: -50px;
-webkit-animation: leftRight 2s linear infinite reverse;
animation: leftRight 2s linear infinite reverse;
}
@-webkit-keyframes leftRight {
0% { -webkit-transform: translateX(0)}
25% { -webkit-transform: translateX(-10px)}
75% { -webkit-transform: translateX(10px)}
100% { -webkit-transform: translateX(0)}
}
@keyframes leftRight {
0% { transform: translateX(0)}
25% { transform: translateX(-10px)}
75% { transform: translateX(10px)}
100% { transform: translateX(0)}
}
Демонстрация
Специально разработали их для работы, где идет для открытой интерфейсной платформой для быстро реагирующих сайтов, но это будет отлично работать с любым отзывчивым сайтом.
Таблицы, это отличный способ организовать множество данных. Мы предлагаем несколько полезных классов, которые помогут вам максимально упростить стиль таблицы. Кроме того, для улучшения работы мобильных телефонов все таблицы ширины мобильного экрана автоматически центрируются.
| | Страна: (RU) |
| |
