For basic styling add the base class .table
to any <table>
.
# | Name | Company | Engine |
---|---|---|---|
1 | Firefox | Mozilla | Gecko |
2 | Chrome | WebKit | |
3 | Internet Explorer | Microsoft | Trident |
4 | Safari | Apple | WebKit |
Use .table-striped
to add zebra-striping to any table row within the <tbody>
.
# | Name | Homepage | Description |
---|---|---|---|
1 | Nginx | http://nginx.org | webserver |
2 | Apache | http://apache.org | webserver |
3 | Skype | http://www.skype.com | Messenger |
4 | Blender | http://www.blender.org | 3D-modeller |
Add .table-bordered
for borders on all sides of the table and cells.
# | Name | Homepage | Description |
---|---|---|---|
1 | Tor | http://torproject.org | Anonymous network |
2 | Bitcoin | http://bitcoin.org | Anonymous money |
3 | I2P | http://www.i2p2.de | Anonymous network |
Add .table-hover
to enable a hover state on table rows within a <tbody>
.
# | Name | Homepage | Description |
---|---|---|---|
1 | OpenOffice | http://openoffice.org | Office suite |
2 | PyCharm | http://jetbrains.com | IDE |
3 | VirtualBox | http://oracle.com | Virtual machine |
# | Company | Product | Homepage | Product description |
---|---|---|---|---|
1 | Oracle | OracleDB | http://oracle.com | SQL server |
2 | RedHat | RedHat Advanced Server | http://redhat.com | Operation System |
3 | Microsoft | Windows | http://microsoft.com | Operation System |
4 | Apple | MacOSX | http://apple.com | Operation System |
5 | Adobe | Adobe Photoshop | http://adobe.com | Design suite |
6 | Corel | Corel Draw! | http://corel.com | Design suite |
7 | Chrome | http://google.com | Web-browser | |
8 | Mozilla | Firefox | http://mozilla.org | Web-browser |
.table-striped
, .table-bordered
, .table-hover
and .table-heading
Also you can use contextual classes to color table rows or individual cells
Column #1 | Column #2 | Column #3 | Column #4 | Column #5 |
---|---|---|---|---|
no | class | to | default | view |
class | active |
to | color | row |
class | primary |
to | color | row |
class | success |
to | color | row |
class | info |
to | color | row |
class | warning |
to | color | row |
class | danger |
to | color | row |
active class to color cell |
success class to color cell |
info class to color cell |
warning class to color cell |
danger class to color cell |