Commit 8b24cedc authored by Nikolay Gromov's avatar Nikolay Gromov

Исправил Адаптивные таблицы со сменой строк на колонки

parent 08d73916
......@@ -3,21 +3,24 @@
.table-responsive-rotate {
&--thead-fix {
position: relative;
padding-left: 12rem;
@media (max-width: (@screen-md - 1)) {
.table-responsive-rotate__inner {
display: block;
width: 100%;
overflow-x: auto;
}
&--thead-fix {
position: relative;
padding-left: 12rem;
.table-responsive-rotate__inner {
display: block;
width: 100%;
overflow-x: auto;
}
thead {
width: 12rem;
position: absolute;
top: 0;
left: 0;
thead {
width: 12rem;
position: absolute;
top: 0;
left: 0;
}
}
}
}
......@@ -2,44 +2,56 @@
.table-responsive-rotate {
display: block;
width: 100%;
overflow-x: auto;
margin-top: (@line-height / 2);
margin-bottom: (@line-height / 2);
border: 1px solid @border-color;
table {
display: flex;
margin: 0;
border: 0 !important;
@media (max-width: (@screen-md - 1)) {
display: block;
width: 100%;
}
overflow-x: auto;
margin-top: (@line-height / 2);
margin-bottom: (@line-height / 2);
border: 1px solid @border-color;
table {
display: flex;
margin: 0;
border: 0 !important;
width: 100%;
}
tbody {
display: flex;
}
tbody {
display: flex;
}
tr {
display: block;
}
tr {
display: block;
}
th,
td {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-left: 0;
border-right: 1px solid @border-color;
&:last-child {
border-bottom: 0;
th,
td {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-left: 0;
border-right: 1px solid @border-color;
&:last-child {
border-bottom: 0;
}
}
}
caption {
display: none;
tfoot {
tr:last-child {
th,
td {
border-right: 0;
}
}
}
caption {
display: none;
}
}
}
......@@ -1163,7 +1163,7 @@
<p>Для просмотра адаптации таблицы сделайте вьюпорт узким.</p>
<p class="alert alert--danger"><strong>ВНИМАНИЕ!</strong> Контент в ячейках таблицы жёстко фиксируется как однострочный (нет зависимости развёрнутых ячеек).</p>
<p class="alert alert--danger"><strong>ВНИМАНИЕ!</strong> При перестройке контент в ячейках таблицы жёстко фиксируется как однострочный (нет зависимости развёрнутых ячеек).</p>
<p class="alert alert--danger"><strong>ВНИМАНИЕ!</strong> Ячейки не должны объединяться. <code>caption</code> скрывается.</p>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment