HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Use the classes below to style any table:
Use the classes below to style any table:
Class | Description | Example |
---|---|---|
.table | Adds basic styling (light padding and only horizontal dividers) to any <table> | Try it |
.table-striped | Adds zebra-striping to any table row within <tbody> (not available in IE8) | Try it |
.table-bordered | Adds border on all sides of the table and cells | Try it |
.table-hover | Enables a hover state on table rows within a <tbody> | Try it |
.table-condensed | Makes table more compact by cutting cell padding in half | Try it |
Combining all the table classes | Try it |
Use the classes below to color table rows or cells:
Class | Description | Example |
---|---|---|
.active | Applies the hover color (light-grey) to a particular row or cell | Try it |
.success | Indicates a successful or positive action | Try it |
.info | Indicates a neutral informative change or action | Try it |
.warning | Indicates a warning that might need attention | Try it |
.danger | Indicates a dangerous or potentially negative action | Try it |
The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:
<div class="table-responsive">
<table class="table">
...
</table>
</div>