DCF Table Class Layouts

This is a responsive striped table.
Greeting Amount Year Description
Hello $2.00 1984 Nullam id dolor id nibh ultricies vehicula ut id elit
Hi $999.99 1999 Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod.
Hey $1,000,000.01 2001 Donec ullamcorper nulla non metus auctor fringilla
Yo $.01 2020 Nulla vitae elit libero, a pharetra augue
This is the caption for a table. Utility classes are used to right-align numbers in this table.
Table heading Table heading Table heading Table heading
Table cell 49 Cras mattis consectetur purus sit amet fermentum Nullam Sollicitudin Mattis
Table cell 16 Nullam quis risus eget urna mollis ornare vel eu leo Ornare Porta Vulputate
Table cell 387 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus Inceptos Ullamcorper Etiam
Table cell 9 Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit Bibendum Sit Lorem
Bordered Tables
.dcf-table-bordered
The bordered table adds borders to all cells in the table.
This is a bordered table.
Column 1 heading Column 2 heading Column 3 heading Column 4 heading
Row group 1 heading 49 Cras mattis consectetur purus sit amet fermentum Nullam Sollicitudin Mattis
16 Nullam quis risus eget urna mollis ornare vel eu leo Ornare Porta Vulputate
Row group 2 heading 387 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus Inceptos Ullamcorper Etiam
9 Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit Bibendum Sit Lorem
Striped Tables
.dcf-table-striped
The striped table adds a subtle background color to alternating rows in the table.
This is a striped table.
Column 1 heading Column 2 heading Column 3 heading Column 4 heading
Row 1 heading 49 Cras mattis consectetur purus sit amet fermentum Nullam Sollicitudin Mattis
Row 2 heading 16 Nullam quis risus eget urna mollis ornare vel eu leo Ornare Porta Vulputate
Row 3 heading 387 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus Inceptos Ullamcorper Etiam
Row 4 heading 9 Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit Bibendum Sit Lorem
Responsive Tables
.dcf-table-responsive
Responsive table contents display “stacked” at narrow screen widths.
This is a responsive table.
Greeting Amount Year Description
Hello $2.00 1984 Nullam id dolor id nibh ultricies vehicula ut id elit
Hi $999.99 1999 Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod.
Hey $1,000,000.01 2001 Donec ullamcorper nulla non metus auctor fringilla
Yo $.01 2020 Nulla vitae elit libero, a pharetra augue
This is a responsive bordered table.
Greeting Amount Year Description
Hello $2.00 1984 Nullam id dolor id nibh ultricies vehicula ut id elit
Hi $999.99 1999 Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod.
Hey $1,000,000.01 2001 Donec ullamcorper nulla non metus auctor fringilla
Yo $.01 2020 Nulla vitae elit libero, a pharetra augue
Scrollable Tables
.dcf-wrapper-table-scroll
Add this class along with .dcf-wrapper to a <div> that wraps the <table> to enable horizontal scrolling as needed.
This is a responsive table.
Greeting Amount Year Month Day Description 1 Description 2 Description 3
Hello $2.00 1984 Jan 11 Nullam id dolor Etiam porta sem malesuada magna mollis euismod Donec id elit non mi porta gravida at eget metus
Hi $999.99 1999 Dec 31 Integer posuere erat Donec sed odio dui Cras justo odio
Hey $1,000,000.01 2001 Jul 15 Donec ullamcorper nulla non metus auctor fringilla Cras mattis consectetur purus sit amet fermentum Donec ullamcorper nulla non metus auctor fringilla
Yo $.01 2020 Feb 23 Nulla vitae elit libero, a pharetra augue Cras mattis consectetur purus sit amet fermentum Vestibulum id ligula porta felis euismod semper
Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.