Formateo de la tabla de misreservas

Padel/padel/static/styles.css

@@ -10,9 +10,9 @@
   }
   
   li {
-    list-style: square inside;
+    list-style: square ;
     border: 1px solid #ccc;
-
+    text-align: left;
   }
 
   a,
@@ -89,3 +89,33 @@
     vertical-align: top;
     padding: 0px;
   }
+
+  table {
+    text-align: left;
+    min-width: 200px;
+    padding: 20px;
+    margin-bottom: 20px;
+    box-shadow: 0px 0px 10px #ccc;
+    vertical-align: top;
+  }
+
+  .columnid {
+    width: 10px;
+  }
+
+  .columnname {
+    width: 300px;
+  }
+
+  #tablareservas td:nth-child(1) {
+    width: 10px;
+  }
+
+  #tablareservas td:nth-child(2) {
+    width: 200px;
+  }
+
+  #tablareservas td:nth-child(5) {
+    width: 100px;
+    text-align: center;
+  }

Padel/padel/templates/reservas/misreservas.html

@@ -5,13 +5,27 @@
 {% endblock header %}
 
 {% block content %}
-    <ul>
+    <table id="tablareservas" border = 1>
+        <thead>
+            <td id="columnid">ID</td>
+            <td id="columnnombre">Nombre</td>
+            <td>Fecha</td>
+            <td>Hora</td>
+            <td>Eliminar</td>
+        </thead>
+
         {% for reserva in reservas %}
-            <li>{{reserva.id}} - {{ reserva.nombre }} - {{ reserva.fecha }} - {{ reserva.hora }}
+            <tr>
+                <td>{{reserva.id}}</td>
+                <td>{{ reserva.nombre }}</td>
+                <td>{{ reserva.fecha }}</td>
+                <td>{{ reserva.hora }}</td>
+                <td>
                 <form class="form-eliminar" action="{{ url_for('reservas.eliminar_reserva', id=reserva.id) }}" method="post" style="display: inline;">
                     <button type="submit"  class="eliminar-btn">Eliminar</button>
                 </form>
-            </li>
+                </td>
+            </tr>
         {% endfor %}
     </ul>
 {% endblock content %}