Tailwind border and border-radius (rounded) issue on html table headers

Question

I'm trying to round the corners of this table with a border. I have found that the elements themselves will round (you can see this in the bg colors in the screenshots), but the border does not round with the element the way I expected.

I've tried applying the border and rounding to every layer (see below), and I get this. I imagine this is some CSS nuance when it comes to tables, but I just can't figure out why this would only affect borders and not the inner elements themselves.

     <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>
    ```

Brothers

You can make your table borderless and apply the desired border style to each element instead. – Emie

You can also try border-collapse: separate on the table/th/td and apply the rounding. – Emie

@Emie border collapse did the trick!! thanks so much – Brothers

Answer 1

Following on from @tromgy's answer, I've put together a very simple table to show how this can be achieved using border-separate on the table element:

  <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>

I also used rounded-tl/tr/bl/br-sm to round the th elements and the last td elements in the body of the table (so their corners don't point out of the border).

This is how this looks visually: Table with rounded corners

Hastate

Answer 2

border-separate did the trick. thanks @tromgy!

Brothers

Please share more info, a sample markup will be helpful too. – Paramagnetism

@Emie Can you share a sample code? – Granger

Answer 3

Just wrap your table in a div with overflow hidden to mask the thead corners

<div className="border rounded-lg overflow-hidden">
  <table className="min-w-full divide-y divide-neutral-200">
    <thead className="bg-main-100">
      <tr className="px-6 py-3 text-start text-xs font-medium text-neutral-900">
        <th scope="col" className="px-6 py-3 text-start text-xs font-medium text-neutral-900">
          Header 1
        </th>
        <th scope="col" className="px-6 py-3 text-start text-xs font-medium text-neutral-900">
          Header 2
        </th>
        <th scope="col" className="px-6 py-3 text-start text-xs font-medium text-neutral-900">
          Header 3
        </th>
      </tr>
    </thead>
    <tbody className="divide-y divide-neutral-200">
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
      </tr>
    </tbody>
  </table>
</div>

Reheat

Answer 4

You can put a div outside, rouded the div and set oveflow to overflow-hidden.

Boyne

Answer 5

You need to include the border-separate class name beside the border class like this :

<table className="border border-separate">
   ...
</table>

Padegs