Tailwind 上的边框

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，则可以正常工作。试图通过 Tailwind CSS 进行挖掘，但对我来说没有什么明显的东西覆盖它并隐藏顶部边框不显示。我什至在 sudo-tbody div 上尝试了 divide-y divide-gray-700 技巧，但也没有用。

Answer 1

只需将.border-collapse 添加到您的.table。