Border Collapse

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

React props	CSS Properties
`borderCollapse={keyword}`	`border-collapse: {keyword};`

Separate

Use borderCollapse="separate" to force each cell to display its own separate borders.

<x.table borderCollapse="separate" border borderColor="green-800">
  <thead>
    <tr>
      <x.th border borderColor="green-600">
        State
      </x.th>
      <x.th border borderColor="green-600">
        City
      </x.th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <x.td border borderColor="green-600">
        Indiana
      </x.td>
      <x.td border borderColor="green-600">
        Indianapolis
      </x.td>
    </tr>
    <tr>
      <x.td border borderColor="green-600">
        Ohio
      </x.td>
      <x.td border borderColor="green-600">
        Columbus
      </x.td>
    </tr>
    <tr>
      <x.td border borderColor="green-600">
        Michigan
      </x.td>
      <x.td border borderColor="green-600">
        Detroit
      </x.td>
    </tr>
  </tbody>
</x.div>

Combine

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

<x.table borderCollapse="collapse" border borderColor="green-800">
  <thead>
    <tr>
      <x.th border borderColor="green-600">
        State
      </x.th>
      <x.th border borderColor="green-600">
        City
      </x.th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <x.td border borderColor="green-600">
        Indiana
      </x.td>
      <x.td border borderColor="green-600">
        Indianapolis
      </x.td>
    </tr>
    <tr>
      <x.td border borderColor="green-600">
        Ohio
      </x.td>
      <x.td border borderColor="green-600">
        Columbus
      </x.td>
    </tr>
    <tr>
      <x.td border borderColor="green-600">
        Michigan
      </x.td>
      <x.td border borderColor="green-600">
        Detroit
      </x.td>
    </tr>
  </tbody>
</x.table>

Responsive

To control the border collapsing of an element at a specific breakpoint, use responsive object notation. For example, adding the property borderCollapse={{ md: "collapse" }} to an element would apply the borderCollapse="collapse" utility at medium screen sizes and above.

<x.table borderCollapse={{ md: 'collapse' }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Edit this page on GitHub