如何在html css顺风中分组表行

Question

我试图使用顺风和自定义CSS对表行进行分组，如下所示：

​

我做了一些类似于屏幕截图的事情，但问题是我想要在中间的是总数据和等级数据，下面是我的代码：

    <div className="container mx-auto overflow-x-auto border-x border-t my-10">
        <table className="table-auto w-full">
          <thead className="border-b">
            <tr
              style={{ backgroundColor: "#5CB25A" }}
              className="text-white font-bold h-10"
            >
              <th className="text-center md:p-4 p-0 md:w-32 w-10 border-r border-gray-300">
                Subject Code
              </th>
              <th className="text-center md:p-4 p-0 md:w-96 w-none ">
                Subject Name
              </th>
              <th
                colSpan={3}
                className="text-center p-4 border border-t-0 border-gray-300"
              >
                Marks
              </th>
              <th className="text-center md:p-4 p-0 md:w-32 w-10 border-r border-gray-300">
                Grade
              </th>
            </tr>
            <tr
              style={{ backgroundColor: "#5CB25A" }}
              className="border-b border-gray-400 font-bold h-10 text-white"
            >
              <th className="text-center p-4 border-r text-base"></th>
              <th className="text-center p-4"></th>
              <th className="text-center p-4 border ">Theory</th>
              <th className="text-center p-4 border ">MCQ</th>
              <th className="text-center p-4 border ">Total</th>
              <th className="text-center p-4"></th>
            </tr>
          </thead>
          <tbody>
            <tr className="hover:bg-gray-50 text-center border-b-0 border-b-none h-10">
              <td className="p-0 border-l border-r">001</td>
              <td className="p-0 border-l border-r">English 1</td>
              <td className="p-0 border-l border-r">40</td>
              <td className="p-0 border-l border-r">40</td>
              <td className="p-0 border-l border-r"></td>
              <td className="p-0 border-l border-r"></td>
            </tr>
            <tr className="border -b border-t-0 hover:bg-gray-50 text-center h-10">
              <td className="p-0 border-l border-r">001</td>
              <td className="p-0 border-l border-r">English 1</td>
              <td className="p-0 border-l border-r">40</td>
              <td className="p-0 border-l border-r">40</td>
              <td className="p-0 border-l border-r">80</td>
              <td className="p-0 border-l border-r">A+</td>
            </tr>
            <tr className="border-b hover:bg-gray-50 text-center h-10">
              <td className="p-4 border">001</td>
              <td className="p-4 border">English 1</td>
              <td className="p-4 border">40</td>
              <td className="p-4 border">40</td>
              <td className="p-4 border"></td>
              <td className="p-4 border">A+</td>
            </tr>
          </tbody>
        </table>
      </div>

上面的代码UI：

​

如您所见，总数和等级不在中间，因为我已经为组行使用了表行。

Answer 1

首先，我希望您建议删除style={{ backgroundColor: "#5CB25A" }}，并在<thead>标记中添加bg-[#5CB25A]。

 <thead class="border-b bg-[#5CB25A]">

其次，在中间，您可以使用类flex items-center justify-center对年级垂直居中。

还可以使用grid类属性创建如下所示的表

​

<script src="https://cdn.tailwindcss.com"></script>
<div class="m-2 grid grid-cols-6 bg-gray-50 outline outline-1">
  <!-- table head starts -->
  <div class="row-span-2 flex items-center justify-center border-[1px] bg-[#5CB25a] py-12 text-white">Subject Code</div>
  <div class="row-span-2 flex items-center justify-center border-[1px] bg-[#5CB25a] py-12 text-white">Subject Name</div>
  <div class="col-span-3 flex items-center justify-center border-[1px] bg-[#5CB25a] text-white">Marks</div>
  <div class="row-span-2 flex items-center justify-center border-[1px] bg-[#5CB25a] text-white">Grade</div>

  <div class="flex items-center justify-center border-[1px] bg-[#5CB25a] text-white">Theory</div>
  <div class="flex items-center justify-center border-[1px] bg-[#5CB25a] text-white">MCQ</div>
  <div class="flex items-center justify-center border-[1px] bg-[#5CB25a] text-white">Total</div>
<!-- table head ends -->

  <!-- table body starts -->
  <div class="flex items-center justify-center border-[1px] border-b-0 py-4">
    001<br />
    001
  </div>
  <div class="flex items-center justify-center border-[1px] border-b-0">English 1<br />English 1</div>
  <div class="flex items-center justify-center border-[1px] border-b-0">40<br />40</div>
  <div class="flex items-center justify-center border-[1px] border-b-0">40<br />40</div>
  <div class="flex items-center justify-center border-[1px] border-b-0">80</div>
  <div class="flex items-center justify-center border-[1px] py-2">A+</div>

  <div class="flex items-center justify-center border-[1px] py-2">001</div>
  <div class="flex items-center justify-center border-[1px] py-2">English 1</div>
  <div class="flex items-center justify-center border-[1px] py-2">40</div>
  <div class="flex items-center justify-center border-[1px] py-2">40</div>
  <div class="flex items-center justify-center border-[1px] py-2">80</div>
  <div class="flex items-center justify-center border-[1px] py-2">A+</div>

    <!-- table body ends -->
</div>

​

不要忘记用className替换类，因为您正在使用className