Tables

Documentation and examples for styling DITA tables with Bootstrap classes.

Overview

Due to the widespread use of <table> elements across third-party widgets like calendars and date pickers, Bootstrap’s tables are opt-in. Extend with optional modifier outputclasses or custom styles. All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent.

Using the most basic table markup, here’s how the default DITA Bootstrap .table-based tables look in Bootstrap

<table>
  ...etc
</table>

Variants

Use contextual classes to color tables, table rows or individual cells.

<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<row class="table-primary">...</tr>
<row class="table-secondary">...</tr>
<row class="table-success">...</tr>
<row class="table-danger">...</tr>
<row class="table-warning">...</tr>
<row class="table-info">...</tr>
<row class="table-light">...</tr>
<row class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<row>
  <entry outputclass="table-primary">...</td>
  <entry outputclass="table-secondary">...</td>
  <entry outputclass="table-success">...</td>
  <entry outputclass="table-danger">...</td>
  <entry outputclass="table-warning">...</td>
  <entry outputclass="table-info">...</td>
  <entry outputclass="table-light">...</td>
  <entry outputclass="table-dark">...</td>
</row>

Striped rows

Use @outputclass and add table-striped to add zebra-striping to any table row within the <tbody>.

<table outputclass="table-striped">
  ...etc
</table>

Striped columns

Use @outputclass and add table-striped-columns to add zebra-striping to any table row within the <tbody>.

<table outputclass="table-striped-columns">
  ...etc
</table>

Bordered tables

Add @rowsep="1" and @colsep="1" for borders on all sides of the table and cells.

<table rowsep="1" colsep="1">
  ...etc
</table>

Tables without borders

Add @rowsep="0" and @colsep="0" for a table without borders.

<table rowsep="0" colsep="0">
  ...etc
</table>

Small tables

Add @outputclass="table-sm" make any table more compact by cutting all cell padding in half.

<table outputclass="table-sm">
  ...etc
</table>

Table group dividers

Add a thicker border, darker between table groups—<thead> and <tbody>, with @outputclass="table-group-divider".

<table outputclass="table-group-divider">
  ...etc
</table>

Vertical alignment

Table cells of <thead> are always vertical aligned to the bottom. Table cells in <tbody> inherit their alignment from <table> and are aligned to the top by default. Use the @valign attribute to re-align where needed.

<table outputclass="align-middle">
  <tgroup cols="4">
    <colspec colname="COLSPEC0"/>
    <colspec colname="COLSPEC1"/>
    <colspec colname="COLSPEC2"/>
    <colspec colname="COLSPEC3"/>
    <thead>
      <row>
        <entry colname="COLSPEC0" valign="top">...</entry>
        <entry colname="COLSPEC1" valign="bottom">...</entry>
        <entry colname="COLSPEC2" valign="middle">...</entry>
        <entry colname="COLSPEC3" valign="middle">...</entry>
      </row>
    </thead>
    <tbody>
      <row>
        ...
      </row>
      <row valign="bottom">
        ...
      </row>
      <row>
        <entry>...</entry>
        <entry>...</entry>
        <entry valign="top">...</entry>
        <entry>...</entry>
      </row>
    </tbody>
  </tgroup>
</table>

Table head

Similar to tables and dark tables, use the modifier @outputclass="table-light" or @outputclass="table-dark" to make <thead> elements appear light or dark gray.

<table>
  <tgroup>
    <thead outputclass="table-light">
      ...etc
    </thead>
  <tgroup>
</table>

<table>
  <tgroup>
    <thead outputclass="table-dark">
      ...etc
    </thead>
  </tgroup>
</table>