html 表格标题上的顺风边框和边框半径（圆角）问题

Question

我正在尝试用边框将这张桌子的角变圆。我发现元素本身会变圆（您可以在屏幕截图中的背景颜色中看到这一点），但边框不会按照我预期的方式随元素变圆。

我尝试将边框和舍入应用到每一层（见下文），我明白了。我想这对于表格来说是 CSS 的细微差别，但我就是不明白为什么这只会影响边框而不影响内部元素本身。

     <table
        {...getTableProps()}
        className="text-left bg-purple-500 rounded-full border-2 border-accent"
      >
        <thead className="text-left bg-purple-500 rounded-full border-2 border-accent">
          {headerGroups.map((headerGroup) => (
            <tr
              {...headerGroup.getHeaderGroupProps()}
              className="text-left bg-purple-500 rounded-full border-2 border-accent"
            >
              {headerGroup.headers.map((column) => (
                // Add the sorting props to control sorting. For this example
                // we can add them into the header props
                <th
                  {...column.getHeaderProps(column.getSortByToggleProps())}
                  className="p-4 bg-green-700 rounded-full "
                >
                  {column.render("Header")}
                  {/* Add a sort direction indicator */}
                  <span>
                    {column.isSorted
                      ? column.isSortedDesc
                        ? " "
                        : " "
                      : ""}
                  </span>
                </th>
              ))}
            </tr>
          ))}
        </thead>
    ```

Answer 1

根据 from@tromgy的回答，我整理了一个非常简单的表格来展示如何使用元素来实现这border-separate一点table：

  <table className="rounded-sm text-left border border-separate border-tools-table-outline border-black border-1 w-full">
    <thead className="" >
      <th className="rounded-tl-sm bg-yellow-200 pl-12">One</th>
      <th className="rounded-tr-sm bg-yellow-200 pl-12">Two</th>
    </thead>
    <tbody className="rounded-b-sm">
      <tr>
        <td className="bg-blue-100 pl-12">1</td>
        <td className="bg-blue-100 pl-12">2</td>
      </tr>

      <tr>
        <td className="rounded-bl-sm bg-blue-100 pl-12">1</td>
        <td className="rounded-br-sm bg-blue-100 pl-12">2</td>
      </tr>
    </tbody>
  </table>

我还曾经对表格主体中的元素和最后一个元素rounded-tl/tr/bl/br-sm进行圆角化（这样它们的角就不会指向边框之外）。thtd

这就是它的视觉外观： 圆角桌子

Answer 2

border-separate 就成功了。谢谢@tromgy！