Таблицы со скроллом на малых вьюпортах

createBlock.js

@@ -58,7 +58,7 @@ if(blockName) {
 
         // Если это HTML
         else if(extention == 'html') {
-          fileContent = '<!--DEV\n\nДля использования этого файла как шаблона:\n\n@ @include(\'blocks/' + blockName + '/' + blockName + '.html\')\n\n(Нужно убрать пробел между символами @)\nПодробнее: https://www.npmjs.com/package/gulp-file-include-->\n\n<div class="' + blockName + '">content</div>\n';
+          fileContent = '<!--DEV\n\nДля использования этого файла как шаблона:\n\n@ @include(\'blocks/' + blockName + '/' + blockName + '.html\')\n\n(Нужно убрать пробел между символами @)\nПодробнее: https://www.npmjs.com/package/gulp-file-include\n\n-->\n\n<div class="' + blockName + '">content</div>\n';
           // fileCreateMsg = '';
         }
 

package.json

@@ -40,7 +40,8 @@
       "label": [],
       "loader": [],
       "table": [],
-      "table-responsive": []
+      "table-responsive": [],
+      "table-mobile-scroll": []
     },
     "addCssBefore": [
       "./src/scss/variables.scss",

src/blocks-demo.html

@@ -1215,6 +1215,7 @@
 
       <h2 class="blocks-library__item-title">Таблицы</h2>
 
+      <div class="table-mobile-scroll">
         <table class="table">
           <caption>Таблица как БЭМ-блок, нет прописанных thead, tbody, tfoot</caption>
           <tbody>
@@ -1241,7 +1242,9 @@
             </tr>
           </tbody>
         </table>
+      </div>
 
+      <div class="table-mobile-scroll">
         <table class="table">
           <caption>Таблица как БЭМ-блок, есть thead, tbody, tfoot и у них есть классы</caption>
           <thead class="table__header">
@@ -1282,6 +1285,7 @@
             </tr>
           </tfoot>
         </table>
+      </div>
 
       <div class="blocks-library__code-wrapper">
         <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
@@ -1321,6 +1325,55 @@
 
     </section>
 
+    <section class="blocks-library__item" id="table-mobile-scroll" data-name=".table-mobile-scroll">
+
+      <h2 class="blocks-library__item-title">Таблицы со скроллом на малых вьюпортах</h2>
+
+
+
+      <div class="table-mobile-scroll">
+        <table class="table">
+          <tbody>
+            <tr>
+              <th>Имя</th>
+              <th>Фамилия</th>
+              <th>Мыло</th>
+              <th>Статус</th>
+              <th>Политическая ориентация</th>
+            </tr>
+            <tr>
+              <td>Иннокентий</td>
+              <td>Барлаухенштицкен-Ламанческий</td>
+              <td>Хозяйственное</td>
+              <td>Администратор</td>
+              <td>«ВСЕГДА!»</td>
+            </tr>
+            <tr>
+              <td>Васисуалий</td>
+              <td>Пылепневмомешковыколачивателев</td>
+              <td>Душистое</td>
+              <td>Юзверь</td>
+              <td>Нижняя</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="blocks-library__code-wrapper">
+        <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
+        <div class="blocks-library__code">
+          <pre class="code">
+            <code>&lt;div class="table-mobile-scroll"></code>
+            <code>  &lt;table class="table"></code>
+            <code>    ...</code>
+            <code>  &lt;/table></code>
+            <code>&lt;/div></code>
+          </pre>
+        </div>
+      </div>
+
+    </section>
+
     <section class="blocks-library__item" id="table-responsive" data-name=".table-responsive">
 
       <h2 class="blocks-library__item-title">Адаптивность для таблиц</h2>

src/blocks/table-mobile-scroll/table-mobile-scroll.html

+<!--DEV
+
+<div class="table-mobile-scroll">
+  <table class="table">
+    <caption>Таблица</caption>
+    <tbody>
+      <tr>
+        <th>Имя</th>
+        <th>Фамилия</th>
+        <th>Мыло</th>
+        <th>Статус</th>
+        <th>Политическая ориентация</th>
+      </tr>
+      <tr>
+        <td>Иннокентий</td>
+        <td>Барлаухенштицкен-Ламанческий</td>
+        <td>Хозяйственное</td>
+        <td>Администратор</td>
+        <td>«ВСЕГДА!»</td>
+      </tr>
+      <tr>
+        <td>Васисуалий</td>
+        <td>Пылепневмомешковыколачивателев</td>
+        <td>Душистое</td>
+        <td>Юзверь</td>
+        <td>Нижняя</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+-->

src/blocks/table-mobile-scroll/table-mobile-scroll.scss

+// В этом файле должны быть стили только для БЭМ-блока table-mobile-scroll, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
+// Не пишите здесь другие селекторы.
+
+.table-mobile-scroll {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  margin-top: ($line-height / 2);
+  margin-bottom: ($line-height / 2);
+  border: 1px solid $border-color;
+
+  table {
+    margin: 0;
+    border: 0 !important;
+    width: 100%;
+  }
+
+  tbody,
+  thead,
+  tfoot {
+
+    &:last-child {
+
+      tr:last-child {
+
+        td,
+        th {
+          border-bottom: 0;
+        }
+      }
+    }
+  }
+
+  caption {
+    text-align: left;
+    padding: 0.4em;
+    border-bottom: 1px solid $border-color;
+    caption-side: top;
+  }
+}