A bit of styling

static/style.css

@@ -4,7 +4,7 @@
 /* Themes used: Catppuccin Latte & Moccha
  * https://github.com/catppuccin/catppuccin */
 
-/* Dark theme: Catpuccin Mocha */
+/* Dark theme: Catpuccin Mocha
 :root {
     --color-rosewater: #f5e0dc;
     --color-flamingo: #f2cdcd;
@@ -34,10 +34,10 @@
     --color-crust: #11111b;
     --color-action: #333d5d;
     --font-family: Iosevka Web;
-}
+}*/
 
 /* Light theme: Catppuccin Latte */
-@media (prefers-color-scheme: light) {
+/*@media (prefers-color-scheme: light) {*/
     :root {
         --color-rosewater: #dc8a78;
         --color-flamingo: #dd7878;
@@ -67,7 +67,7 @@
         --color-crust: #dce0e8;
         --color-action: #cdd6f4;
     }
-}
+/*}*/
 
 * {
     font-family: var(--font-family);
@@ -284,4 +284,18 @@ dialog {
 #add-book {
     max-width: 300px;
     margin: auto;
-}
+}
+
+table tr td {
+  border-right: 2px solid var(--color-crust);
+  padding: 0 10px;
+}
+
+table tr td:last-of-type {
+  border: none;
+}
+
+#table-container {
+  max-width: 100vw;
+  overflow-x: scroll;
+}

templates/index.html

@@ -40,31 +40,33 @@
         <input type="submit" value="Ajouter">
     </form>
 </div>
-<table id="books-table">
-    <tr>
-        <th>ISBN</th>
-        <th>Titre</th>
-        <th>Auteur</th>
-        <th>Date</th>
-        <th>Éditeur</th>
-        <th>Quantité</th>
-        <th>Actions</th>
-    </tr>
-    {% for book in books %}
-    <tr>
-        <td>{{ book.isbn }}</td>
-        <td><p {% if book.title == None %}class="red"{% endif %}>{{ book.title }}</p></td>
-        <td><p {% if book.author == None %}class="red"{% endif %}>{{ book.author }}</p></td>
-        <td><p {% if book.publish_date == None %}class="red"{% endif %}>{{ book.publish_date }}</p></td>
-        <td><p {% if book.publisher == None %}class="red"{% endif %}>{{ book.publisher }}</p></td>
-        <td><p {% if book.count != 1 %}class="red"{% endif %}>{{ book.count }}</p></td>
-        <td>
-            <button class="action" onclick="edit_book({{ book.isbn }})">✏️</button>
-            <button class="action" onclick="delete_book({{ book.isbn }})">🗑️</button>
-        </td>
-    </tr>
-    {% endfor %}
-</table>
+<div id="table-container">
+  <table id="books-table">
+      <tr>
+          <th>ISBN</th>
+          <th>Titre</th>
+          <th>Auteur</th>
+          <th>Date</th>
+          <th>Éditeur</th>
+          <th>Quantité</th>
+          <th>Actions</th>
+      </tr>
+      {% for book in books %}
+      <tr>
+          <td>{{ book.isbn }}</td>
+          <td><p {% if book.title == None %}class="red"{% endif %}>{{ book.title }}</p></td>
+          <td><p {% if book.author == None %}class="red"{% endif %}>{{ book.author }}</p></td>
+          <td><p {% if book.publish_date == None %}class="red"{% endif %}>{{ book.publish_date }}</p></td>
+          <td><p {% if book.publisher == None %}class="red"{% endif %}>{{ book.publisher }}</p></td>
+          <td><p {% if book.count != 1 %}class="red"{% endif %}>{{ book.count }}</p></td>
+          <td>
+              <button class="action" onclick="edit_book({{ book.isbn }})">✏️</button>
+              <button class="action" onclick="delete_book({{ book.isbn }})">🗑️</button>
+          </td>
+      </tr>
+      {% endfor %}
+  </table>
+</div>
 <br/>
 <a href="/export-csv" download="books.csv">Exporter en CSV</a>
 {% endblock %}