如何使用顺风将间距添加到 table

Question

我试图将 space 添加到 table，但我无法做到。我尝试使用 space-x-、填充，但没有得到预期的输出。

<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>

预期输出：

Answer 1

border-separate 为分离工作。
如果你想要更多的控制（分离度），你可以添加， border-spacing 属性.

但是 TW 没有 border-spacing 的实用程序。

TW doc on spacing 显示 space-x-3 为 margin-left: 0.75rem;
所以你需要 border-spacing: 0.75rem.

您可以在 Tailwind CSS 文件中添加自定义实用程序（或组件）。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .my-table-spacing {
    border-spacing: theme("spacing.3");
  }
}

并像 <table class="border-separate my-table-spacing"> 一样使用它。

演示：https://play.tailwindcss.com/qAFB4JGLvo?file=css

但是使用 Tailwind CSS v3.0，您可以添加 arbitrary properties.
因此，您可以添加 [border-spacing:0.75rem] 作为任意属性
如下图

<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>

同样在 TW 游乐场：https://play.tailwindcss.com/UYWXm7PTEo

如何使用顺风将间距添加到 table

How to add spacing to a table using tailwind

html

javascript

css

flexbox

tailwind-css