{"id":317,"date":"2015-03-25T22:43:34","date_gmt":"2015-03-25T22:43:34","guid":{"rendered":"http:\/\/razonartificial.com\/themes\/reason-wp\/?page_id=317"},"modified":"2015-03-25T22:43:34","modified_gmt":"2015-03-25T22:43:34","slug":"tables","status":"publish","type":"page","link":"https:\/\/test.innovative8.uk.com\/wp3\/tables\/","title":{"rendered":"Tables"},"content":{"rendered":"
\n

Tables<\/h1>\n

Basic example<\/h2>\n

For basic styling—light padding and only horizontal dividers—add the base class .table<\/code> to any <table><\/code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we’ve opted to isolate our custom table styles.<\/p>\n

\n\n\n\n\n\n\n\n
#<\/th>\nFirst Name<\/th>\nLast Name<\/th>\nUsername<\/th>\n<\/tr>\n<\/thead>\n
1<\/td>\nMark<\/td>\nOtto<\/td>\n@mdo<\/td>\n<\/tr>\n
2<\/td>\nJacob<\/td>\nThornton<\/td>\n@fat<\/td>\n<\/tr>\n
3<\/td>\nLarry<\/td>\nthe Bird<\/td>\n@twitter<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n

<\/p>\n

<\/p>\n

\n
\n <\/i> Show Code<\/a>\n <\/div>\n
\n
\n [xml]
\n<table class="table"><\/p>\n

<\/table>
\n [\/xml]\n <\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n

<\/p>\n

Striped rows<\/h2>\n

Use .table-striped<\/code> to add zebra-striping to any table row within the <tbody><\/code>.<\/p>\n

\n

Cross-browser compatibility<\/h4>\n

Striped tables are styled via the :nth-child<\/code> CSS selector, which is not available in Internet Explorer 8.<\/p>\n<\/p><\/div>\n

\n\n\n\n\n\n\n\n
#<\/th>\nFirst Name<\/th>\nLast Name<\/th>\nUsername<\/th>\n<\/tr>\n<\/thead>\n
1<\/td>\nMark<\/td>\nOtto<\/td>\n@mdo<\/td>\n<\/tr>\n
2<\/td>\nJacob<\/td>\nThornton<\/td>\n@fat<\/td>\n<\/tr>\n
3<\/td>\nLarry<\/td>\nthe Bird<\/td>\n@twitter<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n


\n <\/p>\n

\n
\n <\/i> Show Code<\/a>\n <\/div>\n
\n
\n [xml]
\n<table class="table table-striped"><\/p>\n

<\/table>
\n [\/xml]\n <\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n

<\/p>\n

Striped rows with primary color<\/h2>\n

Use .table-striped .table-striped-primary<\/code> to add zebra-striping to any table row within the <tbody><\/code>.<\/p>\n

\n

Cross-browser compatibility<\/h4>\n

Striped tables are styled via the :nth-child<\/code> CSS selector, which is not available in Internet Explorer 8.<\/p>\n<\/p><\/div>\n

\n\n\n\n\n\n\n\n\n
#<\/td>\nFirst Name<\/td>\nLast Name<\/td>\nUsername<\/td>\n<\/tr>\n<\/thead>\n
1<\/td>\nMark<\/td>\nOtto<\/td>\n@mdo<\/td>\n<\/tr>\n
2<\/td>\nJacob<\/td>\nThornton<\/td>\n@fat<\/td>\n<\/tr>\n
3<\/td>\nLarry<\/td>\nthe Bird<\/td>\n@twitter<\/td>\n<\/tr>\n
4<\/td>\nSheldon<\/td>\nthe Nerd<\/td>\n@stringtheory<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n


\n <\/p>\n

\n
\n <\/i> Show Code<\/a>\n <\/div>\n
\n
\n [xml]
\n<table class="table table-striped table-striped-primary"><\/p>\n

<\/table>
\n [\/xml]\n <\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n

<\/p>\n

Bordered table<\/h2>\n

Add .table-bordered<\/code> for borders on all sides of the table and cells.<\/p>\n

\n\n\n\n\n\n\n\n\n
#<\/th>\nFirst Name<\/th>\nLast Name<\/th>\nUsername<\/th>\n<\/tr>\n<\/thead>\n
1<\/td>\nMark<\/td>\nOtto<\/td>\n@mdo<\/td>\n<\/tr>\n
Mark<\/td>\nOtto<\/td>\n@TwBootstrap<\/td>\n<\/tr>\n
2<\/td>\nJacob<\/td>\nThornton<\/td>\n@fat<\/td>\n<\/tr>\n
3<\/td>\nLarry the Bird<\/td>\n@twitter<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n


\n <\/p>\n

\n
\n <\/i> Show Code<\/a>\n <\/div>\n
\n
\n [xml]
\n<table class="table table-bordered"><\/p>\n

<\/table>
\n [\/xml]\n <\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n

<\/p>\n

Hover rows<\/h2>\n

Add .table-hover<\/code> to enable a hover state on table rows within a <tbody><\/code>.<\/p>\n

\n\n\n\n\n\n\n\n
#<\/th>\nFirst Name<\/th>\nLast Name<\/th>\nUsername<\/th>\n<\/tr>\n<\/thead>\n
1<\/td>\nMark<\/td>\nOtto<\/td>\n@mdo<\/td>\n<\/tr>\n
2<\/td>\nJacob<\/td>\nThornton<\/td>\n@fat<\/td>\n<\/tr>\n
3<\/td>\nLarry the Bird<\/td>\n@twitter<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n


\n <\/p>\n

\n
\n <\/i> Show Code<\/a>\n <\/div>\n
\n
\n [xml]
\n<table class="table table-hover"><\/p>\n

<\/table>
\n [\/xml]\n <\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n

<\/p>\n

Condensed table<\/h2>\n

Add .table-condensed<\/code> to make tables more compact by cutting cell padding in half.<\/p>\n

\n\n\n\n\n\n\n\n
#<\/th>\nFirst Name<\/th>\nLast Name<\/th>\nUsername<\/th>\n<\/tr>\n<\/thead>\n
1<\/td>\nMark<\/td>\nOtto<\/td>\n@mdo<\/td>\n<\/tr>\n
2<\/td>\nJacob<\/td>\nThornton<\/td>\n@fat<\/td>\n<\/tr>\n
3<\/td>\nLarry the Bird<\/td>\n@twitter<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n


\n <\/p>\n

\n
\n <\/i> Show Code<\/a>\n <\/div>\n
\n
\n [xml]
\n<table class="table table-condensed"><\/p>\n

<\/table>
\n [\/xml]\n <\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n

<\/p>\n

Contextual classes<\/h2>\n

Use contextual classes to color table rows or individual cells.<\/p>\n

\n\n\n\n\n <\/colgroup>\n\n\n\n\n\n\n\n\n
Class<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
\n .active<\/code>\n <\/td>\nApplies the hover color to a particular row or cell<\/td>\n<\/tr>\n
\n .success<\/code>\n <\/td>\nIndicates a successful or positive action<\/td>\n<\/tr>\n
\n .info<\/code>\n <\/td>\nIndicates a neutral informative change or action<\/td>\n<\/tr>\n
\n .warning<\/code>\n <\/td>\nIndicates a warning that might need attention<\/td>\n<\/tr>\n
\n .danger<\/code>\n <\/td>\nIndicates a dangerous or potentially negative action<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
#<\/th>\nColumn heading<\/th>\nColumn heading<\/th>\nColumn heading<\/th>\n<\/tr>\n<\/thead>\n
1<\/td>\nColumn content<\/td>\nColumn content<\/td>\nColumn content<\/td>\n<\/tr>\n
2<\/td>\nColumn content<\/td>\nColumn content<\/td>\nColumn content<\/td>\n<\/tr>\n
3<\/td>\nColumn content<\/td>\nColumn content<\/td>\nColumn content<\/td>\n<\/tr>\n
4<\/td>\nColumn content<\/td>\nColumn content<\/td>\nColumn content<\/td>\n<\/tr>\n
5<\/td>\nColumn content<\/td>\nColumn content<\/td>\nColumn content<\/td>\n<\/tr>\n
6<\/td>\nColumn content<\/td>\nColumn content<\/td>\nColumn content<\/td>\n<\/tr>\n
7<\/td>\nColumn content<\/td>\nColumn content<\/td>\nColumn content<\/td>\n<\/tr>\n
8<\/td>\nColumn content<\/td>\nColumn content<\/td>\nColumn content<\/td>\n<\/tr>\n
9<\/td>\nColumn content<\/td>\nColumn content<\/td>\nColumn content<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n


\n <\/p>\n

\n
\n <\/i> Show Code<\/a>\n <\/div>\n
\n
\n [xml]
\n<!– On rows –>
\n&lt;tr class="active"&gt;…&lt;\/tr&gt;
\n&lt;tr class="success"&gt;…&lt;\/tr&gt;
\n&lt;tr class="warning"&gt;…&lt;\/tr&gt;
\n&lt;tr class="danger"&gt;…&lt;\/tr&gt;
\n&lt;tr class="info"&gt;…&lt;\/tr&gt;<\/p>\n

&lt;!– On cells ("td" or "th") –&gt;
\n&lt;tr&gt;
\n&lt;td class="active"&gt;…&lt;\/td&gt;
\n&lt;td class="success"&gt;…&lt;\/td&gt;
\n&lt;td class="warning"&gt;…&lt;\/td&gt;
\n&lt;td class="danger"&gt;…&lt;\/td&gt;
\n&lt;td class="info"&gt;…&lt;\/td&gt;
\n&lt;\/tr&gt;<\/p>\n

[\/xml]\n <\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n

<\/p>\n

Responsive tables<\/h2>\n

Create responsive tables by wrapping any .table<\/code> in .table-responsive<\/code> to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.<\/p>\n

\n
\n\n\n\n\n\n\n\n
#<\/th>\nTable heading<\/th>\nTable heading<\/th>\nTable heading<\/th>\nTable heading<\/th>\nTable heading<\/th>\nTable heading<\/th>\n<\/tr>\n<\/thead>\n
1<\/td>\nTable cell<\/td>\nTable cell<\/td>\nTable cell<\/td>\nTable cell<\/td>\nTable cell<\/td>\nTable cell<\/td>\n<\/tr>\n
2<\/td>\nTable cell<\/td>\nTable cell<\/td>\nTable cell<\/td>\nTable cell<\/td>\nTable cell<\/td>\nTable cell<\/td>\n<\/tr>\n
3<\/td>\nTable cell<\/td>\nTable cell<\/td>\nTable cell<\/td>\nTable cell<\/td>\nTable cell<\/td>\nTable cell<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n

<\/p>\n

\n\n\n\n\n\n\n\n
#<\/th>\nTable heading<\/th>\nTable heading<\/th>\nTable heading<\/th>\nTable heading<\/th>\nTable heading<\/th>\nTable heading<\/th>\n<\/tr>\n<\/thead>\n
1<\/td>\nTable cell<\/td>\nTable cell<\/td>\nTable cell<\/td>\nTable cell<\/td>\nTable cell<\/td>\nTable cell<\/td>\n<\/tr>\n
2<\/td>\nTable cell<\/td>\nTable cell<\/td>\nTable cell<\/td>\nTable cell<\/td>\nTable cell<\/td>\nTable cell<\/td>\n<\/tr>\n
3<\/td>\nTable cell<\/td>\nTable cell<\/td>\nTable cell<\/td>\nTable cell<\/td>\nTable cell<\/td>\nTable cell<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n

\n <\/div>\n


\n <\/p>\n

\n
\n <\/i> Show Code<\/a>\n <\/div>\n
\n
\n [xml]
\n<div class="table-responsive">
\n<table class="table"><\/p>\n

<\/table>
\n<\/div><\/p>\n

[\/xml]\n <\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n


\n <\/section>\n","protected":false},"excerpt":{"rendered":"

Tables Basic example For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we’ve opted to isolate our custom table styles. # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter Show Code [xml] <table class="table"> <\/table> [\/xml] Striped rows Use .table-striped to add zebra-striping to any table row within the <tbody>. Cross-browser compatibility Striped tables are styled via the :nth-child CSS selector, which is not available in Internet Explorer 8. # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter Show Code [xml] <table class="table table-striped"> <\/table> [\/xml] Striped rows with primary color Use .table-striped .table-striped-primary to add zebra-striping to any table row within the <tbody>. Cross-browser compatibility Striped tables are styled via the :nth-child CSS selector, which is not available in Internet Explorer 8. # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter 4 Sheldon the Nerd @stringtheory Show Code [xml] <table class="table table-striped table-striped-primary"> <\/table> [\/xml] Bordered table Add .table-bordered for borders on all sides of the table and cells. # First Name Last Name Username 1 Mark Otto @mdo Mark Otto @TwBootstrap 2 Jacob Thornton @fat 3 Larry the Bird @twitter Show Code [xml] <table class="table table-bordered"> <\/table> [\/xml] Hover rows Add .table-hover to enable a hover state on table rows within a <tbody>. # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter Show Code [xml] <table class="table table-hover"> <\/table> [\/xml] Condensed table Add .table-condensed to make tables more compact by cutting cell padding in half. # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter Show Code [xml] <table class="table table-condensed"> <\/table> [\/xml] Contextual classes Use contextual classes to color table rows or individual cells. Class Description .active Applies the hover color to a particular row or cell .success Indicates a successful or positive action .info Indicates a neutral informative change or action .warning Indicates a warning that might need attention .danger Indicates a dangerous or potentially negative action # Column heading Column heading Column heading 1 Column content Column content Column content 2 Column content Column content Column content 3 Column content Column content Column content 4 Column content Column content Column content 5 Column content Column content Column content 6 Column content Column content Column content 7 Column content Column content Column content 8 Column content Column content Column content 9 Column content Column content Column content Show Code [xml] <!– On rows –> &lt;tr class="active"&gt;…&lt;\/tr&gt; &lt;tr class="success"&gt;…&lt;\/tr&gt; &lt;tr class="warning"&gt;…&lt;\/tr&gt; &lt;tr class="danger"&gt;…&lt;\/tr&gt; &lt;tr class="info"&gt;…&lt;\/tr&gt; &lt;!– On cells ("td" or "th") –&gt; &lt;tr&gt; &lt;td class="active"&gt;…&lt;\/td&gt; &lt;td class="success"&gt;…&lt;\/td&gt; &lt;td class="warning"&gt;…&lt;\/td&gt; &lt;td class="danger"&gt;…&lt;\/td&gt; &lt;td class="info"&gt;…&lt;\/td&gt; &lt;\/tr&gt; [\/xml] Responsive tables Create responsive tables by wrapping […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"page-left-menu.php","meta":{"footnotes":""},"class_list":["post-317","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/pages\/317","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/comments?post=317"}],"version-history":[{"count":0,"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/pages\/317\/revisions"}],"wp:attachment":[{"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/media?parent=317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}