0
116
ViewsCómo agregar espacio a una tabla usando viento de cola
Estaba tratando de agregar espacio a la mesa pero no pude hacerlo. Intenté usar space-x- , padding pero no obtuve el resultado que esperaba.
<html> <script src="https://cdn.tailwindcss.com"></script> <table class="table-auto"> <tr class="row space-x-3"> <td class="col bg-blue-500">42.80</td> <td class="col bg-blue-500">42.80</td> <td class="col bg-blue-500">52.51</td> <td class="col bg-blue-500">60.40</td> <td class="col bg-blue-500">96.28</td> <td class="col bg-blue-500">69.18</td> <td class="col bg-blue-500">54.43</td> <td class="col bg-blue-500">69.18</td> <td class="col bg-blue-500">96.28</td> <td class="col bg-blue-500">60.40</td> </tr> <tr class="row"> <td class="col bg-blue-500">42.80</td> <td class="col bg-blue-500">42.80</td> <td class="col bg-blue-500">52.51</td> <td class="col bg-blue-500">60.40</td> <td class="col bg-blue-500">96.28</td> <td class="col bg-blue-500">69.18</td> <td class="col bg-blue-500">54.43</td> <td class="col bg-blue-500">69.18</td> <td class="col bg-blue-500">96.28</td> <td class="col bg-blue-500">60.40</td> </tr> </table> </html> Rendimiento esperado:
2 answers
Answer question0
border-separate hace su trabajo para las separaciones.
Si desea más control (sobre los grados de separación), puede agregar la propiedadde espaciado de bordes .
Pero no hay utilidades para border-spacing para TW.
TW doc sobre espaciado muestra space-x-3 como, margin-left: 0.75rem;
Por lo tanto, necesitaría border-spacing: 0.75rem .
Puede agregar una utilidad personalizada (o componente) en su archivo CSS de Tailwind.
@tailwind base; @tailwind components; @tailwind utilities; @layer components { .my-table-spacing { border-spacing: theme("spacing.3"); } } Y utilícelo como <table class="border-separate my-table-spacing"> .
Demostración: https://play.tailwindcss.com/qAFB4JGLvo?file=css
Pero con Tailwind CSS v3.0, puede agregar propiedades arbitrarias .
Por lo tanto, puede agregar [border-spacing:0.75rem] como una propiedad arbitraria
Como se muestra abajo.
<script src="https://cdn.tailwindcss.com"></script> <table class="border-separate [border-spacing:0.75rem]"> <tr class="row"> <td class="col bg-blue-500">42.80</td> <td class="col bg-blue-500">42.80</td> <td class="col bg-blue-500">52.51</td> <td class="col bg-blue-500">60.40</td> <td class="col bg-blue-500">96.28</td> <td class="col bg-blue-500">69.18</td> <td class="col bg-blue-500">54.43</td> <td class="col bg-blue-500">69.18</td> <td class="col bg-blue-500">96.28</td> <td class="col bg-blue-500">60.40</td> </tr> <tr class="row"> <td class="col bg-blue-500">42.80</td> <td class="col bg-blue-500">42.80</td> <td class="col bg-blue-500">52.51</td> <td class="col bg-blue-500">60.40</td> <td class="col bg-blue-500">96.28</td> <td class="col bg-blue-500">69.18</td> <td class="col bg-blue-500">54.43</td> <td class="col bg-blue-500">69.18</td> <td class="col bg-blue-500">96.28</td> <td class="col bg-blue-500">60.40</td> </tr> </table>También en TW Playground: https://play.tailwindcss.com/UYWXm7PTEo
0
Si aplica relleno a la etiqueta como esta: <table class="p-8"><table/> , esto no funcionará, además debe agregar la propiedad border-separate. Finalmente, tendremos: <table class="border-separate p-8"><table/> .