Table

A table is a specific pattern for comparing datasets in a very direct and analytical way.

install	yarn add @clayui/core
version
use	`import {Body, Cell, Head, Row, Table} from '@clayui/core';`

Table of Contents

Variants
Striped
Bordered
Hoverable
Small
Nested Rows
Inline Edit Table
Responsiveness
Always Responsive
Breakpoints
Helpers
Autofit
Alignment
Vertical
Horizontal
Cell Utilities
Heading No Wrap
Table No Wrap
Image

Don’t forget to check WAI-ARIA accessibility pratices for tables when writting your markup.

show-quick-actions-on-hover will need Javascript to add class table-focus on the table row when an item inside is focused to make it keyboard accessible.

A table is styled like a list. The active state can be invoked by adding class table-active to the <tr></tr> element.

	ID	Title	Modified Date	Author	Type
Group 1
	21146	.table-list-title (not a link) .table-list-title a .table-list-link link Some regular text	2 Hours Ago	Stanley Nelson	Folder	Remove Download Checkout
	21148	Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.	2 Hours Ago	Stanley Nelson	Folder	Remove Download Checkout

Snippet

<table
  className="show-quick-actions-on-hover table table-autofit table-list table-nowrap"
>
  <thead>
    <tr>
      <th></th>
      <th className="table-head-title">
        <span className="inline-item inline-item-before">
          <a href="#1">
            <svg
              className="lexicon-icon lexicon-icon-drag"
              focusable="false"
              role="presentation"
            >
              <use href="/icons.svg#drag"></use>
            </svg>
          </a> </span
        ><a className="inline-item text-truncate-inline" href="#1">
          <span className="text-truncate">ID</span
          ><span className="inline-item inline-item-after">
            <svg
              className="lexicon-icon lexicon-icon-arrow-down"
              focusable="false"
              role="presentation"
            >
              <use href="/icons.svg#arrow-down"></use>
            </svg>
          </span>
        </a>
      </th>
      <th className="table-cell-expand table-head-title">
        <a className="inline-item text-truncate-inline" href="#1">
          <span className="text-truncate">Title</span>
        </a>
      </th>
      <th><span className="inline-item">Status</span></th>
      <th className="table-head-title">
        <a className="inline-item text-truncate-inline" href="#1">
          <span className="text-truncate">Modified Date</span>
        </a>
      </th>
      <th><span className="inline-item">Display Date</span></th>
      <th className="table-head-title">
        <a className="inline-item text-truncate-inline" href="#1">
          <span className="text-truncate">Author</span>
        </a>
      </th>
      <th><span className="inline-item">Type</span></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr className="table-divider">
      <td colspan="9">Group 1</td>
    </tr>
    <tr>
      <td>
        <div className="custom-control custom-checkbox">
          <label>
            <input className="custom-control-input" type="checkbox" />
            <span className="custom-control-label"></span>
          </label>
        </div>
      </td>
      <td>21146</td>
      <td className="table-cell-expand">
        <div className="table-list-title">.table-list-title (not a link)</div>
        <div className="table-list-title">
          <a href="#1">.table-list-title a</a>
        </div>
        <div>
          <a className="table-list-link" href="#1">.table-list-link</a>
        </div>
        <div><a href="#1">link</a></div>
        <div>Some regular text</div>
      </td>
      <td>2 Hours Ago</td>
      <td>Stanley Nelson</td>
      <td>Folder</td>
      <td>
        <div className="quick-action-menu">
          <a
            className="component-action quick-action-item"
            href="#1"
            role="button"
          >
            ...
          </a>
          <a
            className="component-action quick-action-item"
            href="#1"
            role="button"
          >
            ...
          </a>
        </div>
        <div className="dropdown dropdown-action">...</div>
      </td>
    </tr>
    <tr className="table-active">
      <td>
        <div className="custom-control custom-checkbox">
          <label>
            <input
              checked=""
              className="custom-control-input"
              type="checkbox"
            />
            <span className="custom-control-label"></span>
          </label>
        </div>
      </td>
      <td>21148</td>
      <td className="table-cell-expand">
        <div className="table-list-title">
          <a className="text-truncate-inline" href="#1">
            <span
              className="text-truncate"
              title="Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds."
              >Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth
              grounds.</span
            >
          </a>
        </div>
      </td>
      <td>2 Hours Ago</td>
      <td>Stanley Nelson</td>
      <td>Folder</td>
      <td>
        <div className="quick-action-menu">
          <a
            className="component-action quick-action-item"
            href="#1"
            role="button"
          >
            ...
          </a>
          <a
            className="component-action quick-action-item"
            href="#1"
            role="button"
          >
            ...
          </a>
        </div>
        <div className="dropdown dropdown-action">...</div>
      </td>
    </tr>
  </tbody>
</table>

Variants

Striped

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

Country	Purchasing Power Parity	Official Exchange Rate	Real Growth Rate
Afganistan	$45.3 billion	$20.65 billion	3.1%
Brazil	$2.416 trillion	$2.19 trillion	2.3%
Congo, Democratic Republic of the	$29.39 billion	$18.56 billion	6.2%
Spain	$1.389 trillion	$1.356 trillion	-1.3%

Snippet

<table className="table table-striped">
  <thead>
    <tr>
      <th>Country</th>
      <th>Purchasing Power Parity</th>
      <th>Official Exchange Rate</th>
      <th>Real Growth Rate</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div className="table-title">
          <a href="#1">Afganistan</a>
        </div>
      </td>
      <td>$45.3 billion</td>
      <td>$20.65 billion</td>
      <td>3.1%</td>
    </tr>
    <tr>
      <td>
        <div className="table-title">
          <a href="#1">Brazil</a>
        </div>
      </td>
      <td>$2.416 trillion</td>
      <td>$2.19 trillion</td>
      <td>2.3%</td>
    </tr>
    <tr>
      <td>
        <div className="table-title">
          <a href="#1">Congo, Democratic Republic of the</a>
        </div>
      </td>
      <td>$29.39 billion</td>
      <td>$18.56 billion</td>
      <td>6.2%</td>
    </tr>
    <tr>
      <td>
        <div className="table-title">
          <a href="#1">Spain</a>
        </div>
      </td>
      <td>$1.389 trillion</td>
      <td>$1.356 trillion</td>
      <td>-1.3%</td>
    </tr>
  </tbody>
</table>

Bordered

Add .table-bordered for borders on all sides of the table and cells.

Country	Purchasing Power Parity	Official Exchange Rate	Real Growth Rate
Afganistan	$45.3 billion	$20.65 billion	3.1%
Brazil	$2.416 trillion	$2.19 trillion	2.3%
Congo, Democratic Republic of the	$29.39 billion	$18.56 billion	6.2%
Spain	$1.389 trillion	$1.356 trillion	-1.3%

Snippet

<table className="table table-bordered">
  <thead>
    <tr>
      <th>Country</th>
      <th>Purchasing Power Parity</th>
      <th>Official Exchange Rate</th>
      <th>Real Growth Rate</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div className="table-title">
          <a href="#1">Afganistan</a>
        </div>
      </td>
      <td>$45.3 billion</td>
      <td>$20.65 billion</td>
      <td>3.1%</td>
    </tr>
    <tr>
      <td>
        <div className="table-title">
          <a href="#1">Brazil</a>
        </div>
      </td>
      <td>$2.416 trillion</td>
      <td>$2.19 trillion</td>
      <td>2.3%</td>
    </tr>
    <tr>
      <td>
        <div className="table-title">
          <a href="#1">Congo, Democratic Republic of the</a>
        </div>
      </td>
      <td>$29.39 billion</td>
      <td>$18.56 billion</td>
      <td>6.2%</td>
    </tr>
    <tr>
      <td>
        <div className="table-title">
          <a href="#1">Spain</a>
        </div>
      </td>
      <td>$1.389 trillion</td>
      <td>$1.356 trillion</td>
      <td>-1.3%</td>
    </tr>
  </tbody>
</table>

Hoverable

Country	Purchasing Power Parity	Official Exchange Rate	Real Growth Rate
Afganistan	$45.3 billion	$20.65 billion	3.1%
Brazil	$2.416 trillion	$2.19 trillion	2.3%
Congo, Democratic Republic of the	$29.39 billion	$18.56 billion	6.2%
Spain	$1.389 trillion	$1.356 trillion	-1.3%

Snippet

<table className="table table-hover">
  <thead>
    <tr>
      <th>Country</th>
      <th>Purchasing Power Parity</th>
      <th>Official Exchange Rate</th>
      <th>Real Growth Rate</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div className="table-title">
          <a href="#1">Afganistan</a>
        </div>
      </td>
      <td>$45.3 billion</td>
      <td>$20.65 billion</td>
      <td>3.1%</td>
    </tr>
    <tr>
      <td>
        <div className="table-title">
          <a href="#1">Brazil</a>
        </div>
      </td>
      <td>$2.416 trillion</td>
      <td>$2.19 trillion</td>
      <td>2.3%</td>
    </tr>
    <tr>
      <td>
        <div className="table-title">
          <a href="#1">Congo, Democratic Republic of the</a>
        </div>
      </td>
      <td>$29.39 billion</td>
      <td>$18.56 billion</td>
      <td>6.2%</td>
    </tr>
    <tr>
      <td>
        <div className="table-title">
          <a href="#1">Spain</a>
        </div>
      </td>
      <td>$1.389 trillion</td>
      <td>$1.356 trillion</td>
      <td>-1.3%</td>
    </tr>
  </tbody>
</table>

Small

Add .table-sm to make tables more compact by cutting cell padding in half.

Country	Purchasing Power Parity	Official Exchange Rate	Real Growth Rate
Afganistan	$45.3 billion	$20.65 billion	3.1%
Brazil	$2.416 trillion	$2.19 trillion	2.3%
Congo, Democratic Republic of the	$29.39 billion	$18.56 billion	6.2%
Spain	$1.389 trillion	$1.356 trillion	-1.3%

Snippet

<table className="table table-sm">
  <thead>
    <tr>
      <th>Country</th>
      <th>Purchasing Power Parity</th>
      <th>Official Exchange Rate</th>
      <th>Real Growth Rate</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div className="table-title">
          <a href="#1">Afganistan</a>
        </div>
      </td>
      <td>$45.3 billion</td>
      <td>$20.65 billion</td>
      <td>3.1%</td>
    </tr>
    <tr>
      <td>
        <div className="table-title">
          <a href="#1">Brazil</a>
        </div>
      </td>
      <td>$2.416 trillion</td>
      <td>$2.19 trillion</td>
      <td>2.3%</td>
    </tr>
    <tr>
      <td>
        <div className="table-title">
          <a href="#1">Congo, Democratic Republic of the</a>
        </div>
      </td>
      <td>$29.39 billion</td>
      <td>$18.56 billion</td>
      <td>6.2%</td>
    </tr>
    <tr>
      <td>
        <div className="table-title">
          <a href="#1">Spain</a>
        </div>
      </td>
      <td>$1.389 trillion</td>
      <td>$1.356 trillion</td>
      <td>-1.3%</td>
    </tr>
  </tbody>
</table>

Nested Rows

Example markup for Nested Rows in Frontend Dataset.

Caption: Table List with filler content
Label	Scope	System	Modified Date	Status
Group 1
Root Object	Company	No	June 12, 2023, 6:07:25PM	Draft	Remove Download Checkout
Root Object - First Level	Company	No	June 12, 2023, 6:07:25PM	Draft	Remove Download Checkout
Second Level Object	Company	No	June 13, 2023, 12:00PM	–	–
Third Level Object	Company	No	June 13, 2023, 12:00PM	–	–

Snippet

<div className="table-responsive">
  <table
    className="show-quick-actions-on-hover table table-list table-nested-rows table-striped"
    role="treegrid"
  >
    <caption>
      Caption: Table List with filler content
    </caption>
    <thead>
      <tr>
        <th scope="col">Label</th>
        <th scope="col">Scope</th>
        <th scope="col">System</th>
        <th scope="col">Modified Date</th>
        <th scope="col">Status</th>
        <th scope="col">
          <svg
            className="lexicon-icon lexicon-icon-caret-down"
            focusable="false"
            role="presentation"
          >
            <use xlink:href="/icons.svg#caret-down" />
          </svg>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr className="table-divider">
        <td colspan="6">Group 1</td>
      </tr>
      <tr aria-level="1" role="row">
        <td role="gridcell">
          <button className="component-action component-drag">
            <svg
              className="lexicon-icon lexicon-icon-drag"
              focusable="false"
              role="presentation"
            >
              <use xlink:href="/icons.svg#drag" />
            </svg>
          </button>
          <div className="autofit-row">
            <div className="autofit-col autofit-col-toggle"></div>
            <div className="autofit-col autofit-col-checkbox">
              <div className="custom-control custom-checkbox">
                <label>
                  <input className="custom-control-input" type="checkbox" />
                  <span className="custom-control-label"></span>
                </label>
              </div>
            </div>
            <div className="autofit-col autofit-col-icon">
              <svg
                className="lexicon-icon lexicon-icon-folder"
                focusable="false"
                role="presentation"
              >
                <use xlink:href="/icons.svg#folder" />
              </svg>
            </div>
            <div className="autofit-col autofit-col-expand">
              <span className="table-title">Root Object</span>
            </div>
          </div>
        </td>
        <td role="gridcell">Company</td>
        <td role="gridcell">No</td>
        <td role="gridcell">June 12, 2023, 6:07:25PM</td>
        <td role="gridcell">
          <span className="label label-sm">Draft</span>
        </td>
        <td role="gridcell">
          <div className="quick-action-menu">
            <a
              className="component-action quick-action-item"
              href="#1"
              role="button"
            >
              <svg
                className="lexicon-icon lexicon-icon-trash"
                focusable="false"
                role="presentation"
              >
                <use xlink:href="/icons.svg#trash" />
              </svg>
            </a>
            <a
              className="component-action quick-action-item"
              href="#1"
              role="button"
            >
              <svg
                className="lexicon-icon lexicon-icon-download"
                focusable="false"
                role="presentation"
              >
                <use xlink:href="/icons.svg#download" />
              </svg>
            </a>
            <a
              className="component-action quick-action-item"
              href="#1"
              role="button"
            >
              <svg
                className="lexicon-icon lexicon-icon-expand"
                focusable="false"
                role="presentation"
              >
                <use xlink:href="/icons.svg#expand" />
              </svg>
            </a>
          </div>
          <div className="dropdown dropdown-action">
            <a
              aria-expanded="false"
              aria-haspopup="true"
              className="component-action dropdown-toggle"
              data-toggle="dropdown"
              href="#1"
              id="dropdownAction1"
              role="button"
            >
              <svg
                className="lexicon-icon lexicon-icon-ellipsis-v"
                focusable="false"
                role="presentation"
              >
                <use xlink:href="/icons.svg#ellipsis-v" />
              </svg>
            </a>
            <ul
              aria-labelledby=""
              className="dropdown-menu dropdown-menu-right"
            >
              <li>
                <a className="dropdown-item" href="#1" role="button">
                  Remove
                </a>
              </li>
              <li>
                <a className="dropdown-item" href="#1" role="button">
                  Download
                </a>
              </li>
              <li>
                <a className="dropdown-item" href="#1" role="button">
                  Checkout
                </a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr aria-level="1" className="table-active" role="row">
        <td role="gridcell">
          <button className="component-action component-drag">
            <svg
              className="lexicon-icon lexicon-icon-drag"
              focusable="false"
              role="presentation"
            >
              <use xlink:href="/icons.svg#drag" />
            </svg>
          </button>
          <div className="autofit-row">
            <div className="autofit-col autofit-col-toggle">
              <button
                className="component-action"
                data-target="#tableCollapse01"
                type="button"
              >
                <span className="collapse-icon-closed">
                  <svg
                    className="lexicon-icon lexicon-icon-angle-right"
                    focusable="false"
                    role="presentation"
                  >
                    <use xlink:href="/icons.svg#angle-right" />
                  </svg>
                </span>
                <span className="collapse-icon-open">
                  <svg
                    className="lexicon-icon lexicon-icon-angle-down"
                    focusable="false"
                    role="presentation"
                  >
                    <use xlink:href="/icons.svg#angle-down" />
                  </svg>
                </span>
              </button>
            </div>
            <div className="autofit-col autofit-col-checkbox">
              <div className="custom-control custom-checkbox">
                <label>
                  <input className="custom-control-input" type="checkbox" />
                  <span className="custom-control-label"></span>
                </label>
              </div>
            </div>
            <div className="autofit-col autofit-col-expand">
              <span className="table-title"> Root Object - First Level </span>
            </div>
          </div>
        </td>
        <td role="gridcell">Company</td>
        <td role="gridcell">No</td>
        <td role="gridcell">June 12, 2023, 6:07:25PM</td>
        <td role="gridcell">
          <span className="label label-sm">Draft</span>
        </td>
        <td role="gridcell">
          <div className="quick-action-menu">
            <a
              className="component-action quick-action-item"
              href="#1"
              role="button"
            >
              <svg
                className="lexicon-icon lexicon-icon-trash"
                focusable="false"
                role="presentation"
              >
                <use xlink:href="/icons.svg#trash" />
              </svg>
            </a>
            <a
              className="component-action quick-action-item"
              href="#1"
              role="button"
            >
              <svg
                className="lexicon-icon lexicon-icon-download"
                focusable="false"
                role="presentation"
              >
                <use xlink:href="/icons.svg#download" />
              </svg>
            </a>
            <a
              className="component-action quick-action-item"
              href="#1"
              role="button"
            >
              <svg
                className="lexicon-icon lexicon-icon-expand"
                focusable="false"
                role="presentation"
              >
                <use xlink:href="/icons.svg#expand" />
              </svg>
            </a>
          </div>
          <div className="dropdown dropdown-action">
            <a
              aria-expanded="false"
              aria-haspopup="true"
              className="component-action dropdown-toggle"
              data-toggle="dropdown"
              href="#1"
              id="dropdownAction1"
              role="button"
            >
              <svg
                className="lexicon-icon lexicon-icon-ellipsis-v"
                focusable="false"
                role="presentation"
              >
                <use xlink:href="/icons.svg#ellipsis-v" />
              </svg>
            </a>
            <ul
              aria-labelledby=""
              className="dropdown-menu dropdown-menu-right"
            >
              <li>
                <a className="dropdown-item" href="#1" role="button">
                  Remove
                </a>
              </li>
              <li>
                <a className="dropdown-item" href="#1" role="button">
                  Download
                </a>
              </li>
              <li>
                <a className="dropdown-item" href="#1" role="button">
                  Checkout
                </a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr aria-level="2" className="collapse" id="tableCollapse01" role="row">
        <td role="gridcell">
          <button className="component-action component-drag">
            <svg
              className="lexicon-icon lexicon-icon-drag"
              focusable="false"
              role="presentation"
            >
              <use xlink:href="/icons.svg#drag" />
            </svg>
          </button>
          <div className="autofit-row">
            <div className="autofit-col autofit-col-toggle"></div>
            <div className="autofit-col autofit-col-toggle">
              <button
                className="component-action"
                data-target="#tableCollapse02"
                type="button"
              >
                <span className="collapse-icon-closed">
                  <svg
                    className="lexicon-icon lexicon-icon-angle-right"
                    focusable="false"
                    role="presentation"
                  >
                    <use xlink:href="/icons.svg#angle-right" />
                  </svg>
                </span>
                <span className="collapse-icon-open">
                  <svg
                    className="lexicon-icon lexicon-icon-angle-down"
                    focusable="false"
                    role="presentation"
                  >
                    <use xlink:href="/icons.svg#angle-down" />
                  </svg>
                </span>
              </button>
            </div>
            <div className="autofit-col autofit-col-checkbox">
              <div className="custom-control custom-checkbox">
                <label>
                  <input className="custom-control-input" type="checkbox" />
                  <span className="custom-control-label"></span>
                </label>
              </div>
            </div>
            <div className="autofit-col autofit-col-expand">
              <span className="table-title"> Second Level Object </span>
            </div>
          </div>
        </td>
        <td role="gridcell">Company</td>
        <td role="gridcell">No</td>
        <td role="gridcell">June 13, 2023, 12:00PM</td>
        <td role="gridcell">--</td>
        <td role="gridcell">--</td>
      </tr>
      <tr aria-level="3" className="collapse" id="tableCollapse02" role="row">
        <td role="gridcell">
          <button className="component-action component-drag">
            <svg
              className="lexicon-icon lexicon-icon-drag"
              focusable="false"
              role="presentation"
            >
              <use xlink:href="/icons.svg#drag" />
            </svg>
          </button>
          <div className="autofit-row">
            <div className="autofit-col autofit-col-toggle"></div>
            <div className="autofit-col autofit-col-toggle"></div>
            <div className="autofit-col autofit-col-toggle"></div>
            <div className="autofit-col autofit-col-checkbox">
              <div className="custom-control custom-checkbox">
                <label>
                  <input className="custom-control-input" type="checkbox" />
                  <span className="custom-control-label"></span>
                </label>
              </div>
            </div>
            <div className="autofit-col autofit-col-expand">
              <span className="table-title"> Third Level Object </span>
            </div>
          </div>
        </td>
        <td role="gridcell">Company</td>
        <td role="gridcell">No</td>
        <td role="gridcell">June 13, 2023, 12:00PM</td>
        <td role="gridcell">--</td>
        <td role="gridcell">--</td>
      </tr>
    </tbody>
  </table>
</div>

Inline Edit Table

	Title	Modified Date
	Web Content 342122-322-abcdefg	35 Seconds Ago	Edit Recycle Bin
		20 Minutes Ago

Snippet

<table className="table table-autofit table-list table-nowrap table-responsive">
  <thead>
    <tr>
      <th>
        <span className="text-truncate-inline">
          <span className="text-truncate"></span>
        </span>
      </th>
      <th className="table-cell-expand">
        <span className="text-truncate-inline">
          <span className="text-truncate">Title</span>
        </span>
      </th>
      <th className="table-cell-expand">
        <span className="text-truncate-inline">
          <span className="text-truncate">Modified Date</span>
        </span>
      </th>
      <th className="table-column-text-end"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div className="custom-control custom-checkbox">
          <label>
            <input className="custom-control-input" type="checkbox" />
            <span className="custom-control-label"></span>
          </label>
        </div>
      </td>
      <td className="table-cell-expand">
        <div className="table-list-title">
          <a className="text-truncate-inline" href="#1">
            <span className="text-truncate"
              >Web Content 342122-322-abcdefg</span
            >
          </a>
        </div>
      </td>
      <td className="table-cell-expand">
        <span className="text-truncate-inline">
          <span className="text-truncate">35 Seconds Ago</span>
        </span>
      </td>
      <td className="table-column-text-end">
        <div className="btn-group btn-group-nowrap">
          <div className="btn-group-item">
            <button className="btn btn-secondary btn-sm" type="button">
              Edit
            </button>
          </div>
          <div className="btn-group-item">
            <div className="dropdown dropdown-action">
              <a
                aria-expanded="false"
                aria-haspopup="true"
                className="component-action dropdown-toggle"
                data-toggle="dropdown"
                href="#1"
                id="dropdownAction1"
                role="button"
              >
                <svg
                  className="lexicon-icon lexicon-icon-ellipsis-v"
                  focusable="false"
                  role="presentation"
                >
                  <use href="/icons.svg#ellipsis-v"></use>
                </svg>
              </a>
              <ul
                aria-labelledby=""
                className="dropdown-menu dropdown-menu-right"
              >
                <li>
                  <a className="dropdown-item" href="#1" role="button">Edit</a>
                </li>
                <li>
                  <a className="dropdown-item" href="#1" role="button"
                    >Recycle Bin</a
                  >
                </li>
              </ul>
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div className="custom-control custom-checkbox">
          <label>
            <input className="custom-control-input" type="checkbox" />
            <span className="custom-control-label"></span>
          </label>
        </div>
      </td>
      <td className="table-cell-expand">
        <input
          className="form-control form-control-sm"
          type="text"
          value="Web Content B"
        />
      </td>
      <td className="table-cell-expand">
        <span className="text-truncate-inline">
          <span className="text-truncate">20 Minutes Ago</span>
        </span>
      </td>
      <td className="table-column-text-end">
        <div className="btn-group btn-group-nowrap">
          <div className="btn-group-item">
            <button className="btn btn-primary btn-sm" type="button">
              Save
            </button>
          </div>
          <div className="btn-group-item">
            <button className="btn btn-secondary btn-sm" type="button">
              Cancel
            </button>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Responsiveness

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

Always Responsive

Across every breakpoint, use .table-responsive for horizontally scrolling tables.

Snippet

<div className="table-responsive">
  <table className="table">
    ...
  </table>
</div>

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

Breakpoints

Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

#	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

#	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

#	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

#	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

Snippet

<div className="table-responsive-sm">
  <table className="table">
    ...
  </table>
</div>

<div className="table-responsive-md">
  <table className="table">
    ...
  </table>
</div>

<div className="table-responsive-lg">
  <table className="table">
    ...
  </table>
</div>

<div className="table-responsive-xl">
  <table className="table">
    ...
  </table>
</div>

Helpers

Autofit

table-autofit constrains table columns to be only as wide as its content, but must be used with table-cell-expand. table-cell-expand will fill the remaining space.

Alignment

You can align table items either vertically or horizontally following the rules below.

Vertical

We have added some classes to help vertically align contents inside a table. The classes table-valign-bottom, table-valign-middle, and table-valign-top on <table> will vertically align table cell contents on the bottom, middle, and top, respectively.

The classes thead-valign-bottom, thead-valign-middle, and thead-valign-top on <table> will vertically align the contents inside the table head.

The classes tbody-valign-bottom, tbody-valign-middle, and tbody-valign-top on <table> will vertically align the contents inside the table body.

Horizontal

We have added some classes to help horizontally align contents inside a table column. The classes table-column-text-start, table-column-text-center, and table-column-text-end will align text left, center, and right respectively.

Cell Utilities

Use table-cell-expand-small, table-cell-expand-smaller, table-cell-expand-smallest with table-cell-expand to size columns smaller relative to the widest column.

We have added table-cell-minw-50, table-cell-minw-75, table-cell-minw-100, table-cell-minw-150, table-cell-minw-200, table-cell-minw-250, table-cell-minw-300, table-cell-minw-350, table-cell-minw-400 to set min-width 50px, 75px, 100px, 150px, 200px, 250px, 300px, 350px, 400px on a specific table column, respectively.

The helpers table-cell-ws-normal and table-cell-ws-nowrap sets white-space to normal or nowrap on a specific table column, respectively.

	ID	Title	Modified Date	Display Date	Author	Type
	21146	Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.	2 Hours Ago	–	Stanley Nelson	Folder

Snippet

<table className="table table-autofit">
  <thead>
    <tr>
      <th></th>
      <th>ID</th>
      <th className="table-cell-minw-300 table-cell-expand">
        <a className="inline-item text-truncate-inline" href="#1">
          <span className="text-truncate">Title</span>
        </a>
      </th>
      <th className="table-cell-expand-small table-cell-ws-nowrap">
        Modified Date
      </th>
      <th className="table-cell-expand-smaller">Display Date</th>
      <th className="table-cell-minw-150 table-cell-expand-smallest">Author</th>
      <th>Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div className="custom-control custom-checkbox">
          <label>
            <input className="custom-control-input" type="checkbox" />
            <span className="custom-control-label"></span>
          </label>
        </div>
      </td>
      <td>21146</td>
      <td className="table-cell-minw-300 table-cell-expand">
        <div className="table-title">
          <span className="text-truncate-inline">
            <span
              className="text-truncate"
              title="Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds."
              >Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth
              grounds.</span
            >
          </span>
        </div>
      </td>
      <td className="table-cell-expand-small table-cell-ws-nowrap">
        2 Hours Ago
      </td>
      <td className="table-cell-expand-smaller">--</td>
      <td className="table-cell-minw-150 table-cell-expand-smallest">
        Stanley Nelson
      </td>
      <td>Folder</td>
    </tr>
  </tbody>
</table>

Heading No Wrap

table-heading-nowrap keeps headings on one line.

	ID	Title	Status	Modified Date	Display Date	Author	Type
	21146	Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.	–	2 Hours Ago	–	Stanley Nelson	Folder

Snippet

<table className="table table-autofit table-heading-nowrap">
  <thead>
    <tr>
      <th></th>
      <th>ID</th>
      <th className="table-cell-expand">
        <span className="text-truncate-inline">
          <span className="text-truncate">Title</span>
        </span>
      </th>
      <th>Status</th>
      <th>Modified Date</th>
      <th>Display Date</th>
      <th>Author</th>
      <th>Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div className="custom-control custom-checkbox">
          <label>
            <input className="custom-control-input" type="checkbox" />
            <span className="custom-control-label"></span>
          </label>
        </div>
      </td>
      <td>21146</td>
      <td className="table-cell-expand">
        <div className="table-title">
          <span className="text-truncate-inline">
            <span
              className="text-truncate"
              title="Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds."
              >Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth
              grounds.</span
            >
          </span>
        </div>
      </td>
      <td>--</td>
      <td>2 Hours Ago</td>
      <td>--</td>
      <td>Stanley Nelson</td>
      <td>Folder</td>
    </tr>
  </tbody>
</table>

Table No Wrap

table-nowrap keeps everything on one line.

	ID	Title	Status	Modified Date	Display Date	Author	Type
	21146	Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.	–	2 Hours Ago	–	Stanley Nelson	Folder

Image

table-img is a helper that sets the max-height to 100px on an image inside a table. Depending on your use case, you may need to use it with the autofit-row pattern.

	ID	Title	Status	Modified Date	Display Date	Author	Type
	21146	Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.	–	2 Hours Ago	–	Stanley Nelson	Folder

Snippet

<table className="table table-autofit table-nowrap">
  <thead>
    <tr>
      <th></th>
      <th>ID</th>
      <th className="table-cell-expand">
        <span className="text-truncate-inline">
          <span className="text-truncate">Title</span>
        </span>
      </th>
      <th>Status</th>
      <th>Modified Date</th>
      <th>Display Date</th>
      <th>Author</th>
      <th>Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div className="custom-control custom-checkbox">
          <label>
            <input className="custom-control-input" type="checkbox" />
            <span className="custom-control-label"></span>
          </label>
        </div>
      </td>
      <td>21146</td>
      <td className="table-cell-expand">
        <div className="autofit-row">
          <div className="autofit-col">
            <img
              alt="thumbnail"
              className="table-img"
              src="/images/thumbnail_coffee.jpg"
            />
          </div>
          <div className="autofit-col autofit-col-expand">
            <div className="table-title">
              <span className="text-truncate-inline">
                <span
                  className="text-truncate"
                  title="Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds."
                  >Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine
                  froth grounds.</span
                >
              </span>
            </div>
          </div>
        </div>
      </td>
      <td>--</td>
      <td>2 Hours Ago</td>
      <td>--</td>
      <td>Stanley Nelson</td>
      <td>Folder</td>
    </tr>
  </tbody>
</table>

Edit this page on GitHub

Contributors

Matuzalém Teles, Selena Aungst

Last edited May 12, 2025 at 7:56:02 PM

Table of Contents

Variants
Striped
Bordered
Hoverable
Small
Nested Rows
Inline Edit Table
Responsiveness
Always Responsive
Breakpoints
Helpers
Autofit
Alignment
Vertical
Horizontal
Cell Utilities
Heading No Wrap
Table No Wrap
Image