Tailwind 中的复杂 Table

Question

如何在 TailWind 上制作这个 table？我在创建 table.

时遇到一些问题

Table 样本：

Answer 1

HTML

<table>
  <tr>
    <th></th>
    <th colspan=2>Mars</th>
    <th colspan=2>Venus</th>
  </tr>
  <tr>
    <th></th>
    <th>Produced</th>
    <th>Sold</th>
    <th>Produced</th>
    <th>Sold</th>
  </tr>
  <tr>
    <td>Teddy Bears</td>
    <td>50,000</td>
    <td>30,000</td>
    <td>100,000</td>
    <td>80,000</td>
  </tr>
  <tr>
    <td>Board Games</td>
    <td>10,000</td>
    <td>5,000</td>
    <td>12,000</td>
    <td>9,000</td>
  </tr>
</table>

CSS

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

table {
  @apply border-collapse  text-gray-700;
}

tr > * {
  @apply border border-gray-400;
}

th {
  @apply bg-gray-200 text-left;
}

td {
  @apply bg-gray-100 text-right;
}

Working example

Tailwind 中的复杂 Table

Complex Table in Tailwind

html

tailwind-css