src/components/tableaux/TableRenderer.vue

@@ -71,7 +71,7 @@ function goTo(page: number) {
       ></TagList>
     </div>
   </div>
-  <table class="pb-0 table-auto">
+  <table class="mb-0 table-auto">
     <thead>
       <tr>
         <th v-for="field in fields" :key="field.key">
@@ -102,8 +102,9 @@ function goTo(page: number) {
   padding-bottom: 0.5rem;
 }
 
-table {
+table:not(:last-child) {
   font-size: 0.8rem;
+  margin-bottom: 0.5rem;
 }
 
 .pages {

src/components/tableaux/pagination/PageButton.vue

@@ -13,7 +13,7 @@ const isPage = computed(() => {
 
 <template>
   <button
-    class="btn-small"
+    class="btn-small btn-pagination"
     :class="{ 'btn-secondary': !isPage, 'bg-primary': isPage }"
     :disabled="isPage"
   >

src/components/tableaux/pagination/PageList.vue

@@ -31,7 +31,7 @@ function setPage(page: number) {
 <template>
   <div>
     <button
-      class="btn-small"
+      class="btn-small btn-navig"
       :disabled="currentPage <= 1"
       :class="{ 'btn-secondary': currentPage > 1, 'bg-grey': currentPage <= 1 }"
       @click="setPage(currentPage - 1)"
@@ -39,13 +39,13 @@ function setPage(page: number) {
       ←
     </button>
     <span v-if="pageNbr <= PAGE_NUMBER">
-      <v-for v-for="index in pageToDraw" :key="index">
+      <span v-for="index in pageToDraw" :key="index">
         <PageButton
           @click="setPage(index)"
           :current-page="currentPage"
           :page="index"
         ></PageButton>
-      </v-for>
+      </span>
     </span>
     <span v-else-if="isAtStart">
       <PageButton
@@ -135,7 +135,7 @@ function setPage(page: number) {
       ></PageButton>
     </span>
     <button
-      class="btn-small"
+      class="btn-small btn-navig"
       :disabled="currentPage >= pageNbr"
       :class="{
         'btn-secondary': currentPage < pageNbr,

src/styles/components/_tables.scss

@@ -4,26 +4,46 @@
 
 table {
   border-collapse: collapse;
+  border-spacing: 0;
   &:not(:last-child) {
     margin-bottom: 1.5rem;
   }
 }
 
 th, td {
-  border:1px solid rgba(0,0,0,0.2);
+  padding: 0.325rem;
-  padding:0;
+  border:0;
   margin:0;
 }
 
 th {
   vertical-align: center;
-  text-align: center;
-}
-
-th, td {
-  padding: 0.325em;
-}
-
-th  {
   font-weight: $fontweight_hyper;
+  background-color:$color-primary;
+  color:white;
 }
+
+td {
+  background-color:$color-background-alt;
+  tr:nth-child(even) & {
+    background-color: darken($color-background-alt, 7.5%);
+  }
+}
+
+thead {
+  th:first-child {
+    border-top-left-radius: 10px;
+  }
+
+  th:last-child {
+    border-top-right-radius: 10px;
+  }
+}
+
+tr:last-child td:first-child {
+  border-bottom-left-radius: 10px;
+}
+
+tr:last-child td:last-child {
+  border-bottom-right-radius: 10px;
+}

src/styles/custom/_article.scss

@@ -8,12 +8,28 @@ article .table-auto table, table.table-auto {
     table-layout: auto;
 }
 
-article table {
+table {
     display: table;
     width: 100%;
     table-layout: fixed;
 }
 
+.btn-pagination, .btn-navig {
+    margin:0;
+    border-radius: 0;
+    width: 2rem;
+}
+
+.btn-navig:first-child {
+    border-top-left-radius: $btn-radius;
+    border-bottom-left-radius: $btn-radius;
+}
+
+.btn-navig:last-child {
+    border-top-right-radius: $btn-radius;
+    border-bottom-right-radius: $btn-radius;
+}
+
 article th {
     height: 34px;
 }