IMPORTANT: Change naming of position utilities to avoid conflicts

2 files changed, 58 insertions, 5 deletions

diff --git a/docs/src/contents/position.pug b/docs/src/contents/position.pug
index 4e73fed..7f49b1f 100644
--- a/docs/src/contents/position.pug
+++ b/docs/src/contents/position.pug
@@ -9,12 +9,13 @@ pre.code(data-lang='HTML')
       <!-- float: left and right -->
       <div class="float-left"></div>
       <div class="float-right"></div>
-      <!-- position: relative, absolute and fixed -->
-      <div class="relative"></div>
-      <div class="absolute"></div>
-      <div class="fixed"></div>
+      <!-- position: relative, absolute, fixed and sticky -->
+      <div class="p-relative"></div>
+      <div class="p-absolute"></div>
+      <div class="p-fixed"></div>
+      <div class="p-sticky"></div>
       <!-- centered block -->
-      <div class="centered"></div>
+      <div class="p-centered"></div>
 
       <!-- m-1 {margin: 4px;} m-2 {margin: 8px;} -->
       <div class="m-1"></div>
diff --git a/docs/src/contents/tables.pug b/docs/src/contents/tables.pug
index 4cb996c..5466959 100644
--- a/docs/src/contents/tables.pug
+++ b/docs/src/contents/tables.pug
@@ -52,4 +52,56 @@ pre.code(data-lang='HTML')
             <td>14 October 1994</td>
           </tr>
         </tbody>
+      </table>
+
+
+.docs-demo.columns
+  .column.col-12
+    table.table.table-striped.table-scroll
+      thead
+        tr
+          th Name
+          th Rating
+          th Duration
+          th Genre
+          th Release date
+          th Director
+      tbody
+        tr
+          td The Shawshank Redemption
+          td R
+          td 2h 22min
+          td Crime, Drama
+          td 14 October 1994
+          td Frank Darabont
+        tr
+          td The Godfather
+          td R
+          td 2h 55min
+          td Crime, Drama
+          td 24 March 1972
+          td Francis Ford Coppola
+        tr
+          td Schindler's List
+          td R
+          td 3h 15min
+          td Biography, Drama, History
+          td 4 February 1994
+          td Steven Spielberg
+        tr
+          td Se7en
+          td R
+          td 2h 7min
+          td Crime, Drama, Mystery
+          td 22 September 1995
+          td David Fincher
+
+p
+  | Add the #[code table-scroll] class to #{'<table>'} to have a horizontally scrollable table.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <table class="table table-striped table-scroll">
+        ...
       </table>
\ No newline at end of file