尾风边界

Question

我将根据以下内容制作基于div的表：

https://tailwindcss.com/docs/display#table

这是我的代码：

<div class="container px-4 mx-auto my-8">
  <div class="table w-full bg-white rounded shadow table-responsive text-center">
    <div class="table-header-group bg-gray-50">
      <div class="border-b border-gray-900 table-row">
        <div class="table-cell p-3 text-sm font-bold uppercase">Title</div>
        <div class="table-cell p-3 text-sm font-bold uppercase">Artist</div>
        <div class="table-cell p-3 text-sm font-bold uppercase">Year</div>
      </div>
    </div>
    <div class="table-row-group divide-y divide-gray-700">
      <div class="table-row border-t border-gray-400 group hover:bg-gray-100">
        <div class="table-cell p-3">Chocolate Starfish And The Hot Dog Flavored Water</div>
        <div class="table-cell p-3">Limp Bizkit</div>
        <div class="table-cell p-3">2000</div>
      </div>
      <div class="table-row border-t border-gray-400 group hover:bg-gray-100">
        <div class="table-cell p-3">Significant Other</div>
        <div class="table-cell p-3">Limp Bizkit</div>
        <div class="table-cell p-3">1999</div>
      </div>
      <div class="table-row border-t border-gray-400 group hover:bg-gray-100">
        <div class="table-cell p-3">Three Dollar Bill, Y’all $</div>
        <div class="table-cell p-3">Limp Bizkit</div>
        <div class="table-cell p-3">1997</div>
      </div>
    </div>
  </div>
</div>

如果将border-t border-gray-400 group hover:bg-gray-100应用于标准表tr，则工作正常。试图挖掘尾风CSS，但对我来说没有什么明显的，什么是覆盖这一点，并隐藏顶部的边框不显示。我甚至在sudo-tbody div上尝试了一个divide-y divide-gray-700技巧，但这也不起作用。

Answer 1

只需将.border-collapse添加到.table中即可。