feat: responsive table

- allow horizontal scroll when not having enough space on X axis
- maximun width for each cell


Former-commit-id: 2db7b66b734b78cb273f6560e364d946038b85fc

2 files changed, 45 insertions, 10 deletions

diff --git a/assets/css/components/_markdown.scss b/assets/css/components/_markdown.scss
index d1e1c50d..4378d398 100644
--- a/assets/css/components/_markdown.scss
+++ b/assets/css/components/_markdown.scss
@@ -109,17 +109,28 @@ $em-text-color: #889E73;
     background-color: rgba(255, 235, 0, .5)
   }
 
-  table {
-      border-collapse: collapse;
-      border-top: 2px solid var(--border-color);
+  .table-container {
       overflow-x: auto;
-      width: 100%;
-      tr {
-          border-bottom: 1px solid var(--border-color);
-      }
-      td, th {
-          padding: 0.5rem 1rem;
-          line-height: 1.5;
+      -webkit-overflow-scrolling: touch;
+
+      table {
+          border-collapse: collapse;
+          table-layout: fixed;
+          min-width: 100%;
+          width: max-content;
+
+          border-top: 2px solid var(--border-color);
+
+          tr {
+              border-bottom: 1px solid var(--border-color);
+          }
+          td, th {
+              max-width: 200px;
+              padding: 0.5rem 1rem;
+              line-height: 1.5;
+              white-space: normal;
+              word-wrap: break-word;
+          }
       }
   }
 
diff --git a/layouts/_default/_markup/render-table.html b/layouts/_default/_markup/render-table.html
new file mode 100644
index 00000000..75196aeb
--- /dev/null
+++ b/layouts/_default/_markup/render-table.html
@@ -0,0 +1,24 @@
+<div class="table-container">
+  <table>
+    {{- if .THead }}
+    <thead>
+      {{- range .THead }}
+      <tr>
+        {{- range . }}
+        <th{{ with .Alignment }} style="text-align:{{ . }}"{{ end }}>{{ .Text | safeHTML }}</th>
+        {{- end }}
+      </tr>
+      {{- end }}
+    </thead>
+    {{- end }}
+    <tbody>
+      {{- range .TBody }}
+      <tr>
+        {{- range . }}
+        <td{{ with .Alignment }} style="text-align:{{ . }}"{{ end }}>{{ .Text | safeHTML }}</td>
+        {{- end }}
+      </tr>
+      {{- end }}
+    </tbody>
+  </table>
+</div>