Bootstrap CSS layout table _javascript tips

In the table component, Bootstrap provides a
1 basics. Table Style
4 additional styles (. table-striped/.table-bordered/.table-hover/.table-condensed)
1 Support-responsive layouts. table-responsive

Table Style

source table {background-color:transparent;} caption {padding-top:8px;
 padding-bottom:8px;
 Color: #777;
Text-align:left;
 } th {Text-align:left}. Table {width:100%;
 max-width:100%;
margin-bottom:20px; }. Table > Thead > Tr > th,. Table > Tbody > Tr > th,. Table > Tfoot > Tr > th,. Table > The
 Ad > TR > td,. Table > Tbody > TR > td,. Table > Tfoot > TR > td {PADDING:8PX;
 line-height:1.42857143;
 Vertical-align:top;
border-top:1px solid #ddd;
 }. Table > Thead > Tr > th {vertical-align:bottom;
border-bottom:2px solid #ddd; }. Table > Caption + thead > Tr:first-child > Th,. table > Colgroup + thead > Tr:first-child > Th,. tabl  E > Thead:first-child > Tr:first-child > Th,. Table > Caption + thead > Tr:first-child > td,. Table > 
Colgroup + thead > Tr:first-child > td,. table > Thead:first-child > Tr:first-child > td {Border-top:0; }. Table &Gt

 Tbody + tbody {border-top:2px solid #ddd; table. Table {background-color: #fff;}

table.striped Style – table with background stripes

Source code
. table-striped > Tbody > Tr:nth-of-type (odd) {
 background-color: #f9f9f9;
}

table.bordered Style – A table with borders

Provides 1 1-pixel-wide borders for all cells in a table

Source code
. table-bordered {
 border:1px solid #ddd;
}
. table-bordered > Thead > Tr > Th,
. table-bordered > Tbody > Tr > Th,
. table-bordered > Tfoo T > tr > th,
. table-bordered > Thead > TR > td,
. table-bordered > Tbody > TR > td,
. table-bordered > Tfoot > Tr > td {
 border:1px solid #ddd;
table-bordered > Thead > Tr > Th,
. table-bordered > Thead > Tr > td {
 border-bottom-width:2px ;
}

Table.hover Style – mouse hover highlighted table

table.condensed Style – Compact Form

Source code
. table-condensed > Thead > Tr > Th,
. table-condensed > Tbody > Tr > Th,
. Table-condense D > tfoot > Tr > Th,
. table-condensed > Thead > TR > td,
. table-condensed > Tbody > TR ; TD,
. table-condensed > Tfoot > Tr > td {
 padding:5px;
}

Row-level element style

Bootstrap provides 5 additional styles for the TR element of a table to control the background color of tr. Active, success, info, warning, danger

source. Table > Thead > Tr > td.active,. Table > Tbody > Tr > td.active,. Table > Tfoot > TR > t d.active,. Table > Thead > Tr > th.active,. Table > Tbody > Tr > th.active,. Table > Tfoot > TR &G T th.active,. Table > Thead > Tr.active > td,. table > Tbody > Tr.active > td,. table > Tfoot > TR.A Ctive > TD,. table > Thead > Tr.active > Th,. Table > Tbody > Tr.active > Th,. Table > Tfoot > tr.active > th {background-color: #f5f5f5; table-hover > Tbody > Tr > Td.active:hover,. table-hover > tbody > Tr > Th.active:hover,. table-hover > Tbody > Tr.active:hover > td,. table-hover > Tbody > TR:  Hover > Active,. table-hover > Tbody > Tr.active:hover > th {background-color: #e8e8e8; table > Thead > Tr > td.success,. Table > Tbody > Tr > td.success,. Table > Tfoot > Tr > td.success,. Table ; Thead > Tr >th.success,. Table > Tbody > Tr > th.success,. Table > Tfoot > Tr > th.success,. table > Thead > t  R.success > TD,. table > Tbody > Tr.success > td,. table > Tfoot > Tr.success > td,. Table > Thead > tr.success > Th,. Table > Tbody > Tr.success > Th,. Table > Tfoot > Tr.success > th {Backgrou
Nd-color: #dff0d8; }. table-hover > Tbody > Tr > Td.success:hover,. table-hover > Tbody > Tr > Th.success:hover,. Table-hov Er > tbody > Tr.success:hover > td,. table-hover > Tbody > Tr:hover > Success,. table-hover > Tbody > Tr.success:hover > th {background-color: #d0e9c6}. Table > Thead > Tr > Td.info,. Table > Tbody &G T  TR > td.info,. Table > Tfoot > Tr > Td.info,. Table > Thead > Tr > Th.info,. Table > Tbody > TR > th.info,. Table > Tfoot > Tr > Th.info,. Table > Thead > Tr.info > td,. table > Tbody > Tr.i Nfo > TD,. table > Tfoot > Tr.info > td,. table > Thead > Tr.info > Th,. Table > Tbody > Tr.info > th,. Table > Tfoot > Tr.info > th {background-color: #d9edf7; table-hover > Tbody > Tr > td.in Fo:hover,. table-hover > Tbody > Tr > Th.info:hover,. table-hover > Tbody > Tr.info:hover > td,. table-h 
Over > Tbody > Tr:hover > Info,. table-hover > Tbody > Tr.info:hover > th {background-color: #c4e3f3; }. Table > Thead > Tr > td.warning,. Table > Tbody > Tr > td.warning,. Table > Tfoot > TR > TD . Warning,. Table > Thead > Tr > th.warning,. Table > Tbody > Tr > th.warning,. Table > Tfoot > TR > th.warning,. Table > Thead > Tr.warning > td,. table > Tbody > Tr.warning > td,. Table > Tfoot & Gt Tr.warning > TD,. table > Thead > Tr.warning > Th,. Table > Tbody > Tr.warning > Th,. Table > Tfoo T > tr.warning &GT th {background-color: #fcf8e3; table-hover > Tbody > Tr > Td.warning:hover,. table-hover > Tbody > TR > Th.warning:hover,. table-hover > Tbody > Tr.warning:hover > td,. table-hover > Tbody > Tr:hover >. Warning,. table-hover > Tbody > Tr.warning:hover > th {background-color: #faf2cc;} table > Thead > TR & Gt Td.danger,. Table > Tbody > Tr > Td.danger,. Table > Tfoot > Tr > Td.danger,. Table > Thead > TR & Gt Th.danger,. Table > Tbody > Tr > Th.danger,. Table > Tfoot > Tr > Th.danger,. Table > Thead > TR.D Anger > TD,. table > Tbody > Tr.danger > td,. table > Tfoot > Tr.danger > td,. Table > Thead >  Tr.danger > th,. Table > Tbody > Tr.danger > Th,. Table > Tfoot > Tr.danger > th {background-color:
#f2dede;  }. table-hover > Tbody > Tr > Td.danger:hover,. table-hover > Tbody > Tr > Th.danger:hover,. table-hover &gT Tbody > Tr.danger:hover > td,. table-hover > Tbody > Tr:hover > Danger,. table-hover > Tbody > Tr.da

 Nger:hover > th {background-color: #ebcccc;}

Response table

With a large demand for responsive design, Bootstrap provides a responsive design container (. table-responsive) for the table, wrapping the. table-responsive style outside the. Table style to create a responsive table
Horizontal scrolling on small screen (<768px), horizontal scroll bar on large screen disappears

<div class= "table-responsive" >
 <table class= "table" >
 </table>
</div>

Source code. table-responsive {min-height:. 1%;
Overflow-x: auto; //Put the original. Table style to the bottom of the margin-bottom from 20px to 0px, the purpose is to eliminate the scroll bar to bring the upper and lower height difference//And in the. table-responsive style set up a margin-bottom:15px,
 Avoid overlapping with the next element outside the container @media screen and (max-width:767px) {. table-responsive {width:100%;
 margin-bottom:15px;
 Overflow-y: Hidden;
 -ms-overflow-style:-ms-autohiding-scrollbar;
 border:1px solid #ddd;
 }. table-responsive > Table {margin-bottom:0; table-responsive > Table > Thead > Tr > th,. table-responsive >. Table > Tbody > Tr > Th. table-responsive > Table > Tfoot > Tr > th,. table-responsive >. Table > Thead > TR > td,. tabl e-responsive > Table > Tbody > TR > td,. table-responsive >. Table > Tfoot > TR > td {WHITE-SP
 Ace:nowrap;
 }. table-responsive > table-bordered {border:0; //You can see Table-responsive to add a 1px outside border, if the table on the use of table-bordered style, it will coincide with the outer frame of the table, it will become thicker, so the following code to write. Table-responsive > table-bordered > Thead > Tr > Th:first-child,. table-responsive >. table-bordered > Tbody > Tr > Th:f Irst-child, table-responsive > Table-bordered > Tfoot > Tr > Th:first-child,. table-responsive >. Table -bordered > Thead > Tr > Td:first-child,. table-responsive >. table-bordered > Tbody > Tr > Td:first -child,. table-responsive > Table-bordered > Tfoot > Tr > Td:first-child {border-left:0;//The first cell of all TR (leftmost A column) is set to the left border of 0px}. table-responsive > Table-bordered > Thead > Tr > Th:last-child,. table-responsive >. table-bordered > Tbody > Tr > Th:last-child,. table-responsive >. table-bordered > Tfoot > Tr > th:l Ast-child, table-responsive > Table-bordered > Thead > Tr > Td:last-child,. table-responsive > Table-b Ordered > Tbody > Tr > Td:last-child,. table-responsive >. table-bordered > Tfoot > Tr > Td:last-chi LD {border-right:0;//The left border of all TR's last cell (rightmost column) is set to 0px}. table-responsive > Table-bordered > Tbody > Tr:last-child > Th,. table-r Esponsive > Table-bordered > Tfoot > Tr:last-child > Th,. table-responsive >. table-bordered > Tbody & Gt Tr:last-child > td,. table-responsive > Table-bordered > Tfoot > Tr:last-child > td {Border-bottom:0;/
 /The bottom border of the cell in the last line of TR is set to 0px}}

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.