Merging Cells in an HTML Table with Tailwind

by tailkits

HTML

<script src="https://cdn.tailwindcss.com"></script>
<table class="min-w-full border-collapse border border-gray-300">
  <thead>
    <tr class="bg-gray-100">
      <th class="border border-gray-300 p-2">Project</th>
      <th class="border border-gray-300 p-2">Task</th>
      <th class="border border-gray-300 p-2">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!-- Project cell spans 3 rows -->
      <td rowspan="3" class="border border-gray-300 p-2 text-center bg-blue-50">Project Alpha</td>
      <td class="border border-gray-300 p-2">Design</td>
      <td class="border border-gray-300 p-2">In Progress</td>
    </tr>
    <tr>
      <td class="border border-gray-300 p-2">Development</td>
      <td class="border border-gray-300 p-2">Pending</td>
    </tr>
    <tr>
      <td class="border border-gray-300 p-2">Testing</td>
      <td class="border border-gray-300 p-2">Not Started</td>
    </tr>
    <tr class="bg-gray-50">
      <td rowspan="2" class="border border-gray-300 p-2 text-center bg-blue-50">Project Beta</td>
      <td class="border border-gray-300 p-2">Research</td>
      <td class="border border-gray-300 p-2">Completed</td>
    </tr>
    <tr class="bg-gray-50">
      <td class="border border-gray-300 p-2">Implementation</td>
      <td class="border border-gray-300 p-2">In Progress</td>
    </tr>
  </tbody>
</table>