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' ;
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.
<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 > Show code
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 $45.3 billion $20.65 billion 3.1% $2.416 trillion $2.19 trillion 2.3% $29.39 billion $18.56 billion 6.2% $1.389 trillion $1.356 trillion -1.3%
<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 > Show code
Bordered
Add .table-bordered
for borders on all sides of the table and cells.
Country Purchasing Power Parity Official Exchange Rate Real Growth Rate $45.3 billion $20.65 billion 3.1% $2.416 trillion $2.19 trillion 2.3% $29.39 billion $18.56 billion 6.2% $1.389 trillion $1.356 trillion -1.3%
<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 > Show code
Hoverable
Country Purchasing Power Parity Official Exchange Rate Real Growth Rate $45.3 billion $20.65 billion 3.1% $2.416 trillion $2.19 trillion 2.3% $29.39 billion $18.56 billion 6.2% $1.389 trillion $1.356 trillion -1.3%
<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 > Show code
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 $45.3 billion $20.65 billion 3.1% $2.416 trillion $2.19 trillion 2.3% $29.39 billion $18.56 billion 6.2% $1.389 trillion $1.356 trillion -1.3%
<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 > Show code
Nested Rows
Example markup for Nested Rows in Frontend Dataset.
Caption: Table List with filler content Label Scope System Modified Date Status Group 1 Company No June 12, 2023, 6:07:25PM Draft
Root Object - First Level
Company No June 12, 2023, 6:07:25PM Draft Company No June 13, 2023, 12:00PM – – Company No June 13, 2023, 12:00PM – –
<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 > Show code
Inline Edit Table
<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 > Show code
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.
<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
<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 > Show code
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.
<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 > Show code
Heading No Wrap
table-heading-nowrap
keeps headings on one line.
<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 > Show code
Table No Wrap
table-nowrap
keeps everything on one line.
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.
<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 > Show code Edit this page on GitHub Contributors
Matuzalém Teles, Selena Aungst
Last edited May 12, 2025 at 7:56:02 PM