Default styles
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table> <table-header> <table-col>#</table-col> <table-col>First Name</table-col> <table-col>Last Name</table-col> <table-col>Username</table-col> </table-header> <table-body> <table-row> <table-col>1</table-col> <table-col>Mark</table-col> <table-col>Otto</table-col> <table-col>@mdo</table-col> </table-row> <table-row> <table-col>2</table-col> <table-col>Jacob</table-col> <table-col>Thornton</table-col> <table-col>@fat</table-col> </table-row> <table-row> <table-col>3</table-col> <table-col>Larry</table-col> <table-col>the Bird</table-col> <table-col>@twitter</table-col> </table-row> </table-body> </table>
Default Styles with Zebra-Striping
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table style="striped"> <table-header> <table-col>#</table-col> <table-col>First Name</table-col> <table-col>Last Name</table-col> <table-col>Username</table-col> </table-header> <table-body> <table-row> <table-col>1</table-col> <table-col>Mark</table-col> <table-col>Otto</table-col> <table-col>@mdo</table-col> </table-row> <table-row> <table-col>2</table-col> <table-col>Jacob</table-col> <table-col>Thornton</table-col> <table-col>@fat</table-col> </table-row> <table-row> <table-col>3</table-col> <table-col>Larry</table-col> <table-col>the Bird</table-col> <table-col>@twitter</table-col> </table-row> </table-body> </table>
Default Styles borders
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Jacob | Thornton | @fat | |
| 3 | Larry | the Bird |
<table style="bordered"> <table-header> <table-col>#</table-col> <table-col>First Name</table-col> <table-col>Last Name</table-col> <table-col>Username</table-col> </table-header> <table-body> <table-row> <table-col rows="2">1</table-col> <table-col>Mark</table-col> <table-col>Otto</table-col> <table-col>@mdo</table-col> </table-row> <table-row> <table-col>Jacob</table-col> <table-col>Thornton</table-col> <table-col>@fat</table-col> </table-row> <table-row> <table-col>3</table-col> <table-col>Larry</table-col> <table-col>the Bird</table-col> <table-col>@twitter</table-col> </table-row> </table-body> </table>
Default Styles with hover enabled
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | ||
<table style="hover"> <table-header> <table-col>#</table-col> <table-col>First Name</table-col> <table-col>Last Name</table-col> <table-col>Username</table-col> </table-header> <table-body> <table-row> <table-col>1</table-col> <table-col>Mark</table-col> <table-col>Otto</table-col> <table-col>@mdo</table-col> </table-row> <table-row> <table-col>2</table-col> <table-col>Jacob</table-col> <table-col>Thornton</table-col> <table-col>@fat</table-col> </table-row> <table-row> <table-col>3</table-col> <table-col cols="2">Larry</table-col> <table-col>@twitter</table-col> </table-row> </table-body> </table>
Cutting cell padding in half
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table style="sm"> <table-header> <table-col>#</table-col> <table-col>First Name</table-col> <table-col>Last Name</table-col> <table-col>Username</table-col> </table-header> <table-body> <table-row> <table-col>1</table-col> <table-col>Mark</table-col> <table-col>Otto</table-col> <table-col>@mdo</table-col> </table-row> <table-row> <table-col>2</table-col> <table-col>Jacob</table-col> <table-col>Thornton</table-col> <table-col>@fat</table-col> </table-row> <table-row> <table-col>3</table-col> <table-col cols="2">Larry the Bird</table-col> <table-col>@twitter</table-col> </table-row> </table-body> </table>
Use contextual classes to color table rows
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
| 4 | Bird | @ | |
<table> <table-header> <table-col>#</table-col> <table-col>First Name</table-col> <table-col>Last Name</table-col> <table-col>Username</table-col> </table-header> <table-body> <table-row style="success"> <table-col>1</table-col> <table-col>Mark</table-col> <table-col>Otto</table-col> <table-col>@mdo</table-col> </table-row> <table-row style="danger"> <table-col>2</table-col> <table-col>Jacob</table-col> <table-col>Thornton</table-col> <table-col>@fat</table-col> </table-row> <table-row style="warning"> <table-col>3</table-col> <table-col size="2">Larry the Bird</table-col> <table-col>@twitter</table-col> </table-row> <table-row style="info"> <table-col>4</table-col> <table-col cols="2">Bird</table-col> <table-col>@</table-col> </table-row> </table-body> </table>