Border Collapse

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "border-collapse"; export const description = "Utilities for controlling whether table borders should collapse or be separated.";

<ApiTable rows={[ ["border-collapse", "border-collapse: collapse;"], ["border-separate", "border-collapse: separate;"], ]} />

Examples

Collapsing table borders

Use the border-collapse utility to combine adjacent cell borders into a single border when possible:

<Figure> <Example padding={false}> { <div className="px-4 py-8 sm:px-8"> <table className="w-full border-collapse border border-gray-400 bg-white text-sm dark:border-gray-500 dark:bg-gray-800"> <thead className="bg-gray-50 dark:bg-gray-700"> <tr> <th className="w-1/2 border border-gray-300 p-4 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200"> State </th> <th className="w-1/2 border border-gray-300 p-4 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200"> City </th> </tr> </thead> <tbody> <tr> <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400"> Indiana </td> <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400"> Indianapolis </td> </tr> <tr> <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">Ohio</td> <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400"> Columbus </td> </tr> <tr> <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400"> Michigan </td> <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400"> Detroit </td> </tr> </tbody> </table> </div> } </Example> </Figure>

Note that this includes collapsing borders on the top-level <table> tag.

Separating table borders

Use the border-separate utility to force each cell to display its own separate borders:

<Figure> <Example padding={false}> { <div className="px-4 py-8 sm:px-8"> <table className="w-full border-separate border border-gray-400 bg-white text-sm dark:border-gray-500 dark:bg-gray-800"> <thead className="bg-gray-50 dark:bg-gray-700"> <tr> <th className="w-1/2 border border-gray-300 p-4 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200"> State </th> <th className="w-1/2 border border-gray-300 p-4 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200"> City </th> </tr> </thead> <tbody> <tr> <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400"> Indiana </td> <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400"> Indianapolis </td> </tr> <tr> <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">Ohio</td> <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400"> Columbus </td> </tr> <tr> <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400"> Michigan </td> <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400"> Detroit </td> </tr> </tbody> </table> </div> } </Example> </Figure>

Responsive design

<ResponsiveDesign element="table" property="border-collapse" defaultClass="border-collapse" featuredClass="border-separate" />