responsive tables for screens smaller than 800px wide

flask_admin/static/admin/css/bootstrap2/admin.css

@@ -89,3 +89,53 @@ table.filters tr td {
 .admin-form .controls {
     margin-left: 110px;
 }
+
+@media only screen and (max-width: 800px) {
+
+    /* Force table to not be like tables anymore */
+    #no-more-tables table,
+    #no-more-tables thead,
+    #no-more-tables tbody,
+    #no-more-tables th,
+    #no-more-tables td,
+    #no-more-tables tr {
+        display: block;
+    }
+
+    /* Hide table headers (but not display: none;, for accessibility) */
+    #no-more-tables thead tr {
+        position: absolute;
+        top: -9999px;
+        left: -9999px;
+    }
+
+    #no-more-tables tr { border: 1px solid #ccc; }
+
+    #no-more-tables td {
+        /* Behave  like a "row" */
+        border: none;
+        border-bottom: 1px solid #eee;
+        position: relative;
+        padding-left: 50%;
+        white-space: normal;
+        text-align:left;
+    }
+
+    #no-more-tables td:before {
+        /* Now like a table header */
+        position: absolute;
+        /* Top/left values mimic padding */
+        top: 6px;
+        left: 6px;
+        width: 45%;
+        padding-right: 10px;
+        white-space: nowrap;
+        text-align:left;
+        font-weight: bold;
+    }
+
+    /*
+    Label the data
+    */
+    #no-more-tables td:before { content: attr(data-title); }
+}

flask_admin/static/admin/css/bootstrap3/admin.css

@@ -98,3 +98,8 @@ body.modal-open {
     margin-top: 20px;
     margin-bottom: 10px;
 }
+
+.table-responsive
+{
+    overflow-x: auto;
+}

flask_admin/templates/bootstrap2/admin/file/list.html

@@ -22,6 +22,7 @@
     {% endblock %}
 
     {% block file_list_table %}
+    <div id="no-more-tables">
     <table class="table table-striped table-bordered model-list">
         <thead>
             <tr>
@@ -84,13 +85,13 @@
                 {% endblock %}
             </td>
             {% if is_dir %}
-            <td colspan="2">
+            <td colspan="2" data-title="{{ _gettext('Name') }}">
                 <a href="{{ get_dir_url('.index', path)|safe }}">
                     <i class="fa fa-folder-o icon-folder-close"></i> <span>{{ name }}</span>
                 </a>
             </td>
             {% else %}
-            <td>
+            <td data-title="{{ _gettext('Name') }}">
                 {% if admin_view.can_download %}
                   {%- if admin_view.edit_modal and admin_view.is_file_editable(path) -%}
                     {{ lib.add_modal_button(url=get_file_url(path, modal=True)|safe,
@@ -102,7 +103,7 @@
                   {{ name }}
                 {% endif %}
             </td>
-            <td>
+            <td data-title="{{ _gettext('Size') }}">
                 {{ size|filesizeformat }}
             </td>
             {% endif %}
@@ -110,6 +111,7 @@
         </tr>
         {% endfor %}
     </table>
+    </div>
     {% endblock %}
     {% block toolbar %}
     <div class="btn-toolbar">

flask_admin/templates/bootstrap2/admin/model/list.html

@@ -52,8 +52,9 @@
     {% endif %}
 
     {% block model_list_table %}
-    <table class="table table-striped table-bordered table-hover model-list">
-        <thead>
+    <div id="no-more-tables">
+    <table class="table table-striped table-bordered table-hover model-list cf">
+        <thead class="cf">
             <tr>
                 {% block list_header scoped %}
                     {% if actions %}
@@ -143,7 +144,7 @@
                 {% endblock %}
 
                 {% for c, name in list_columns %}
-                    <td class="col-{{c}}">
+                    <td class="col-{{c}}" data-title="{{ name }}">
                     {% if admin_view.is_editable(c) %}
                         {% if form.csrf_token %}
                         {{ form[c](pk=get_pk_value(row), value=get_value(row, c), csrf=form.csrf_token._value()) }}
@@ -169,6 +170,7 @@
         </tr>
         {% endfor %}
     </table>
+    </div>
     {% block list_pager %}
     {% if num_pages is not none %}
     {{ lib.pager(page, num_pages, pager_url) }}

flask_admin/templates/bootstrap3/admin/file/list.html

@@ -22,6 +22,7 @@
     {% endblock %}
 
     {% block file_list_table %}
+    <div class="table-responsive">
     <table class="table table-striped table-bordered model-list">
         <thead>
             <tr>
@@ -110,6 +111,7 @@
         </tr>
         {% endfor %}
     </table>
+    </div>
     {% endblock %}
     {% block toolbar %}
     <div class="btn-toolbar">

flask_admin/templates/bootstrap3/admin/model/list.html

@@ -52,6 +52,7 @@
     {% endif %}
 
     {% block model_list_table %}
+    <div class="table-responsive">
     <table class="table table-striped table-bordered table-hover model-list">
         <thead>
             <tr>
@@ -168,6 +169,7 @@
         </tr>
         {% endfor %}
     </table>
+    </div>
     {% block list_pager %}
     {% if num_pages is not none %}
     {{ lib.pager(page, num_pages, pager_url) }}