Table

Border Collapse

Utilities for controlling whether table borders should collapse or be separated.

Basic usage

Collapse

Use border-collapse to combine adjacent cell borders into a single border when possible. Note that this includes collapsing borders on the top-level <table> tag.

State	City
Indiana	Indianapolis
Ohio	Columbus
Michigan	Detroit

<table
  className="**border-collapse** border border-slate-400 ..."
  dark-className="**border-collapse** border border-slate-500 ..."
>
  <thead>
    <tr>
      <th
        className="border border-slate-300 ..."
        dark-className="border border-slate-600 ..."
      >
        State
      </th>
      <th
        className="border border-slate-300 ..."
        dark-className="border border-slate-600 ..."
      >
        City
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td
        className="border border-slate-300 ..."
        dark-className="border border-slate-700 ..."
      >
        Indiana
      </td>
      <td
        className="border border-slate-300 ..."
        dark-className="border border-slate-700 ..."
      >
        Indianapolis
      </td>
    </tr>
    <tr>
      <td
        className="border border-slate-300 ..."
        dark-className="border border-slate-700 ..."
      >
        Ohio
      </td>
      <td
        className="border border-slate-300 ..."
        dark-className="border border-slate-700 ..."
      >
        Columbus
      </td>
    </tr>
    <tr>
      <td
        className="border border-slate-300 ..."
        dark-className="border border-slate-700 ..."
      >
        Michigan
      </td>
      <td
        className="border border-slate-300 ..."
        dark-className="border border-slate-700 ..."
      >
        Detroit
      </td>
    </tr>
  </tbody>
</table>

Separate

Use border-separate to force each cell to display its own separate borders.

State	City
Indiana	Indianapolis
Ohio	Columbus
Michigan	Detroit

<table
  className="**border-separate** border border-slate-400 ..."
  dark-className="**border-separate** border border-slate-500 ..."
>
  <thead>
    <tr>
      <th
        className="border border-slate-300 ..."
        dark-className="border border-slate-600 ..."
      >
        State
      </th>
      <th
        className="border border-slate-300 ..."
        dark-className="border border-slate-600 ..."
      >
        City
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td
        className="border border-slate-300 ..."
        dark-className="border border-slate-700 ..."
      >
        Indiana
      </td>
      <td
        className="border border-slate-300 ..."
        dark-className="border border-slate-700 ..."
      >
        Indianapolis
      </td>
    </tr>
    <tr>
      <td
        className="border border-slate-300 ..."
        dark-className="border border-slate-700 ..."
      >
        Ohio
      </td>
      <td
        className="border border-slate-300 ..."
        dark-className="border border-slate-700 ..."
      >
        Columbus
      </td>
    </tr>
    <tr>
      <td
        className="border border-slate-300 ..."
        dark-className="border border-slate-700 ..."
      >
        Michigan
      </td>
      <td
        className="border border-slate-300 ..."
        dark-className="border border-slate-700 ..."
      >
        Detroit
      </td>
    </tr>
  </tbody>
</table>