nicer table styles

majak_uistyleguide/templates/patterns/atoms/table/popout_table.html

 <div class="__js-root">
   <ui-popout-table sizing-classes="max-w-[100ch] w-full" :open-by-default="false">
     <template slot="head">
-      <tr class="bg-black [&_*]:!text-white [&_*]:!pt-2">
-        <th>Company</th>
-        <th>Contact</th>
-        <th>Country</th>
+      <tr class="bg-black [&_*]:!text-white [&_p]:py-0 [&_p]:my-0 [&_>_th]:py-2">
+        <th>
+          <p>
+            Company
+          </p>
+        </th>
+        <th>
+          <p>
+            Contact
+          </p>
+        </th>
+        <th>
+          <p>
+            Country
+          </p>
+        </th>
       </tr>
     </template>
 
     <template slot="body">
       <tr>
-        <td>Alfreds Futterkiste</td>
-        <td>Maria Anders</td>
-        <td>Germany</td>
+        <td>
+          <p>
+            Alfreds Futterkiste
+          </p>
+        </td>
+        <td>
+          <p>
+            Maria Anders
+          </p>
+        </td>
+        <td>
+          <p>
+            Germany
+          </p>
+        </td>
       </tr>
       <tr>
-        <td>Centro comercial Moctezuma</td>
-        <td>Francisco Chang</td>
-        <td>Mexico</td>
+        <td>
+          <p>
+            Centro comercial Moctezuma
+          </p>
+        </td>
+        <td>
+          <p>
+            Francisco Chang
+          </p>
+        </td>
+        <td>
+          <p>
+            Mexico
+          </p>
+        </td>
       </tr>
     </template>
   </ui-popout-table>

majak_uistyleguide/templates/patterns/atoms/table/table.html

 <div class="my-6 prose max-w-[100ch]">
   <table>
     <thead>
-      <tr class="bg-black [&_*]:!text-white [&_*]:!pt-2">
+      <tr class="bg-black [&_*]:!text-white [&_p]:py-0 [&_p]:my-0 [&_>_th]:py-2">
         <th>Company</th>
         <th>Contact</th>
         <th>Country</th>
       </tr>
     </thead>
 
-    <tbody>
+    <tbody
+      class="
+        w-full duration-200 [&_p]:py-0 [&_p]:my-0 [&_td]:py-2 [&_td]:align-middle
+        [&_tr:nth-child(even)]:bg-grey-50
+      "
+    >
       <tr>
         <td>Alfreds Futterkiste</td>
         <td>Maria Anders</td>
@@ -17,7 +22,11 @@
       <tr>
         <td>Centro comercial Moctezuma</td>
         <td>Francisco Chang</td>
-        <td>Mexico</td>
+        <td>
+          A<br>
+          B<br>
+          C<br>
+        </td>
       </tr>
     </tbody>
   </table>

src/css/molecules/card_box.pcss

 .flip-card {
-  .prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  &.prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     margin-top: 0.75rem;
     margin-bottom: 0.75rem;
   }
 
-  .prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  &.prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     margin-top: 0.25rem;
     margin-bottom: 0.25rem;
   }

src/js/components/PopoutTable.vue

 <template>
   <table :class="'duration-200 my-6 prose ' + $props.sizingClasses">
+    <slot name="caption"></slot>
+
     <thead class="relative w-full duration-200">
       <slot name="head"></slot>
 
       <div class="absolute top-0 right-[-60px]">
         <button
           ref="togglerButton"
-          class="w-12 h-12 rounded-full bg-white hover:bg-grey-125 duration-150 flex justify-center items-center"
+          class="w-10 h-10 rounded-full bg-white hover:bg-grey-125 duration-150 flex justify-center items-center"
           @click="$data.isOpen = !$data.isOpen"
         >
           <i
@@ -23,7 +25,10 @@
 
     <tbody
       v-if="$data.isOpen"
-      class="w-full duration-200"
+      class="
+        w-full duration-200 [&_p]:py-0 [&_p]:my-0 [&_td]:py-2 [&_td]:align-middle
+        [&_tr:nth-child(even)]:bg-grey-50
+      "
     >
       <slot name="body"></slot>
     </tbody>