tables

src/blocks/blocks-library/blocks-library.js

+// Не работает в IE11
 ready(function(){
   // Открытие/закрытие блока с кодом
   var codeShowTriggers = document.querySelectorAll('.blocks-library__code-show-trigger');

src/blocks/table-responsive-scroll/table-responsive-scroll.less

@@ -13,9 +13,11 @@
   table {
     margin: 0;
     border: 0 !important;
+    width: 100%;
   }
 
   caption {
-    display: none;
+    text-align: left;
+    border-bottom: 1px solid @border-color;
   }
 }

src/blocks/table-responsive/table-responsive--horizontal.less

+@import '../../less/variables.less';     // только для удобства обращения к переменным
+
+
+//------------------------------------------------------------------------------
+//  Адаптивные таблицы (требуют наличия атрибутов data-label на тегах td)
+//------------------------------------------------------------------------------
+
+.table-responsive {
+
+  &--horizontal {
+
+    @media (max-width: (@screen-md - 1)) {
+
+      tbody {
+
+        td {
+          display: block;
+          width: 100%;
+          padding-left: 19rem;
+
+          &:before {
+            width: 18rem;
+            min-width: 18rem;
+            padding-right: 1rem;
+            float: left;
+            margin-left: -19rem + 0.6rem;
+          }
+
+          &:after {
+            content: '';
+            display: table;
+            clear: both;
+          }
+        }
+      }
+    }
+  }
+
+}

src/blocks/table-responsive/table-responsive.less

@@ -6,7 +6,48 @@
 //------------------------------------------------------------------------------
 
 .table-responsive {
-  // Таблицу с любым классом можно сделать адаптивной, вызывая эту примесь.
-  // ВНИМАНИЕ: примесь ждет макс. ширину, на которой таблица ещё адпативна.
-  .table-responsive(sm);
+
+  @media (max-width: (@screen-md - 1)) {
+    display: block;
+    border: 0;
+
+    caption {
+      display: block;
+      width: 100%;
+      text-align: left;
+    }
+
+    thead {
+      display: none;
+    }
+
+    tbody {
+      display: block;
+      width: 100%;
+
+      tr {
+        display: block;
+        border: 1px solid @gray-lighter;
+        border-bottom: 0;
+
+        &:not(:last-child) {
+          margin-bottom: @line-height;
+        }
+      }
+
+      td {
+        display: block;
+        width: 100%;
+        border-right: 0 !important;
+        border-left: 0 !important;
+
+        &:before {
+          display: block;
+          font-weight: 700;
+          content: attr(data-label);
+        }
+      }
+    }
+  }
+
 }

src/blocks/table/table--not-greed.less

+@import '../../less/variables.less';     // только для удобства обращения к переменным
+
+
+.table {
+
+  &--not-greed {
+    width: auto;
+  }
+
+}

src/blocks/table/table.less

@@ -2,14 +2,6 @@
 
 
 .table {
-  border: 1px solid @border-color;
-
-  td,
-  th {
-    &:not(:first-child) {
-      border-left: 1px solid @border-color;
-    }
-  }
 
   &__header {
     background-color: @gray-lightest;

src/less/global/global-tables.less

@@ -6,18 +6,26 @@ table {
   border: 0;
   border-collapse: collapse;
   width: 100%;
+  border: 1px solid @border-color;
 }
 
 caption {
-  padding: 0.6em;
+  padding: round(0.6em * (100 / @font-size--small-percent), 2);
+  text-align: right;
+  caption-side: bottom;
+  font-size: @font-size--small-percent;
+  line-height: 1em;
   color: @text-color--muted;
-  text-align: left;
 }
 
 td,
 th {
   vertical-align: top;
   border-bottom: 1px solid @border-color;
+
+  &:not(:first-child) {
+    border-left: 1px solid @border-color;
+  }
 }
 
 th {

src/less/mixins/mixins.less

 @import 'grid-mixins.less';
 @import 'btn-mixins.less';
-@import 'table-responsive-mixins.less';
 @import 'responsive-mixins.less';
 @import 'focus-mixin.less';
 @import 'forms-mixins.less';

src/less/mixins/table-responsive-mixins.less

-//------------------------------------------------------------------------------
-//  Правила для адаптивной таблицы
-//------------------------------------------------------------------------------
-//  ВНИМАНИЕ: примесь ждет макс. ширину, на которой таблица ещё адпативна.
-//------------------------------------------------------------------------------
-
-.table-responsive(@screen: md) {
-
-  & when (@screen = sm) {
-    @media (max-width: (@screen-md - 1)) {
-      .table-responsive-properties();
-    }
-  }
-  & when (@screen = md) {
-    @media (max-width: (@screen-lg - 1)) {
-      .table-responsive-properties();
-    }
-  }
-  & when (@screen = lg) {
-    @media (max-width: (@screen-xl - 1)) {
-      .table-responsive-properties();
-    }
-  }
-  & when (@screen = xl) {
-    @media (max-width: (@screen-xxl - 1)) {
-      .table-responsive-properties();
-    }
-  }
-  & when (@screen = xxl) {
-    @media (max-width: (@screen-xxl - 1)) {
-      .table-responsive-properties();
-    }
-  }
-
-}
-
-.table-responsive-properties() {
-  display: block;
-  border: 0;
-  overflow-x: auto; // IE11 отказывается переносить длинный текст в <td>, даём костыль
-
-  thead {
-    display: none;
-  }
-
-  tbody {
-    display: block;
-    width: 100%;
-
-    tr {
-      display: block;
-      border-top: 0;
-
-      &:not(:last-child) {
-        margin-bottom: @line-height;
-      }
-    }
-
-    td {
-      display: flex;
-      width: 100%;
-
-      &:before {
-        display: block;
-        padding-right: .5em;
-        font-weight: 700;
-        white-space: nowrap;
-        content: attr(data-label) + ":";
-      }
-    }
-  }
-}

src/less/style.less

@@ -16,7 +16,9 @@
 @import './src/blocks/table/table.less';
 @import './src/blocks/table/table--hover.less';
 @import './src/blocks/table/table--striped.less';
+@import './src/blocks/table/table--not-greed.less';
 @import './src/blocks/table-responsive/table-responsive.less';
+@import './src/blocks/table-responsive/table-responsive--horizontal.less';
 @import './src/blocks/table-responsive-scroll/table-responsive-scroll.less';
 @import './src/blocks/field-text/field-text.less';
 @import './src/blocks/field-text/field-text--lg.less';