| State | Capital | Abbreviation | State Animal |
|---|---|---|---|
| Alabama | Montgomery | AL | Black Bear |
| California | Sacramento | CA | California Grizzly Bear |
| Delaware | Dover | DE | Gray Fox |
| Florida | Tallahasee | FL | Panther |
Responsive table columns that fits within any screen size. Created with jQuery and CSS. The table can be styled with predefined CSS classes. By referencing the CSS classes "sji-table-responsive" and "sji-table-compact", you will have the option to style both of the table layout views. Easy to implement. Tested and renders well in IE 9+ and all other browsers.
Use these elements in your project by previewing the HTML code examples and downloading the CSS and JS source files.
Compatible With:
!DOCTYPE html
html
head
meta charset="UTF-8"
title
Page Title
/title
Include link to the jQuery library
script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"/script
Link the "sji-table-responsive.js" and "sji-table-responsive-min.css" files to your document
script type="text/javascript" src="sji-table-responsive.js"/script
link rel="stylesheet" type="text/css" href="sji-table-responsive-min.css"
/head
body
Create the HTML table using thead and tbody tags
Add the attribute "min-width" to the table tag and assign a numerical value.
This value will represent the browser window width at which the table will switch layout view
table class="sji-table-responsive" min-width="600"
thead
tr
thState/th
thCapital/th
thAbbreviation/th
/tr
/thead
tbody
tr
tdAlabama/td
tdMontgomery/td
tdAL/td
/tr
tr.../tr
tr.../tr
/tbody
/table
To add a solid gray bar to the table header, add class "header-tint" to the table tag
table class="sji-table-responsive header-tint"...
Add alternate striping to the table rows.
table class="sji-table-responsive row-striped"...
Combine multiple class attributes.
table class="sji-table-responsive header-tint row-striped"...
Note: By referencing the CSS classes "sji-table-responsive" and "sji-table-compact",
you will have the option to style both of the table layout views.
/body
/html
