table-responsive

src/_blocks_library.html

@@ -136,6 +136,30 @@
     <hr>
   </section>
 
+  <section>
+    <h2>Исходное: Адаптивные таблицы</h2>
+    <p>Внимание! Адаптивные таблицы требуют добавления дата-атрибутов. Фиксация минимальной ширины имитатора <code>th</code> будет полезной.</p>
+    <table class="table-responsive">
+      <thead>
+        <tr>
+          <th>Имя и фамилия</th>
+          <th>Тип мироощущения</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td data-label="Имя и фамилия">Анатоле Вассерман</td>
+          <td data-label="Тип мироощущения">Девственность</td>
+        </tr>
+        <tr>
+          <td data-label="Имя и фамилия">Джакомо Казанова</td>
+          <td data-label="Тип мироощущения">Небольшая распущенность с лёгкоё примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей.</td>
+        </tr>
+      </tbody>
+    </table>
+    <hr>
+  </section>
+
   <section>
     <h2>Исходное: Формы по умолчанию</h2>
     <form action="">

src/less/blocks/table-responsive.less

+//------------------------------------------------------------------------------
+//  Адаптивные таблицы (требуют наличия атрибутов data-label на тегах td)
+//------------------------------------------------------------------------------
+
+.table-responsive {
+
+  @media (max-width: (@screen-md - 1)) {
+    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/global_scaffolding.less

@@ -135,7 +135,8 @@ ol,
 dl,
 blockquote,
 address,
-figure {
+figure,
+table {
   margin-top: (@line-height / 2);
   margin-bottom: (@line-height / 2);
 }
@@ -279,6 +280,7 @@ caption {
 
 td,
 th {
+  vertical-align: top;
   border-bottom: 1px solid @border-color;
 }
 

src/less/style.less

@@ -3,3 +3,5 @@
 
 @import "global_scaffolding.less";
 @import "global_grid.less";
+
+@import "blocks/table-responsive.less";