我想给 table 增加空间，但我做不到。我试过使用 space-x- 填充，但没有得到预期的输出。
Link
<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>预期输出:
最佳答案
border-separate为分离做好它的工作。
如果你想要更多的控制(分离度)，你可以添加，
border-spacing属性(property)。
但是 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 Playground 上:https://play.tailwindcss.com/UYWXm7PTEo
https://stackoverflow.com/questions/70323225/