nodes-ui

--- title: Table Types layout: nested-component.html --- <h1 class="docs--page-header">Table Types</h1> <div class="text-info docs--panel docs--panel-info"> <p> You can mix the following tables styles together: </p> <ul class="no-bullet"> <li> .table-striped </li> <li> .table-bordered </li> <li> .table-hover </li> </ul> <p> And you use either of the .condensed or .expanded (but not both) with any of the above styles. </p> </div> <h2 class="docs--section-header"> Basic Table </h2> <table class="table"> <thead> <tr> <td> First Name </td> <td> Last Name </td> <td> Username </td> <td> Email </td> <td> Role </td> <td> Birthday </td> <td> Status </td> <td> Last login </td> </tr> </thead> <tbody> <tr> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> <td> 21/05/1980 </td> <td> Active </td> <td> 19/11/2014 </td> </tr> <tr> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> <td> 21/05/1980 </td> <td> Active </td> <td> 19/11/2014 </td> </tr> <tr> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> <td> 21/05/1980 </td> <td> Active </td> <td> 19/11/2014 </td> </tr> </tbody> </table> <h2 class="docs--section-header"> Striped Table </h2> <table class="table table-striped"> <thead> <tr> <td> First Name </td> <td> Last Name </td> <td> Username </td> <td> Email </td> <td> Role </td> <td> Birthday </td> <td> Status </td> <td> Last login </td> </tr> </thead> <tbody> <tr> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> <td> 21/05/1980 </td> <td> Active </td> <td> 19/11/2014 </td> </tr> <tr> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> <td> 21/05/1980 </td> <td> Active </td> <td> 19/11/2014 </td> </tr> <tr> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> <td> 21/05/1980 </td> <td> Active </td> <td> 19/11/2014 </td> </tr> </tbody> </table> <h2 class="docs--section-header"> Bordered Table </h2> <table class="table table-bordered"> <thead> <tr> <td> First Name </td> <td> Last Name </td> <td> Username </td> <td> Email </td> <td> Role </td> <td> Birthday </td> <td> Status </td> <td> Last login </td> </tr> </thead> <tbody> <tr> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> <td> 21/05/1980 </td> <td> Active </td> <td> 19/11/2014 </td> </tr> <tr> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> <td> 21/05/1980 </td> <td> Active </td> <td> 19/11/2014 </td> </tr> <tr> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> <td> 21/05/1980 </td> <td> Active </td> <td> 19/11/2014 </td> </tr> </tbody> </table> <h2 class="docs--section-header"> Hover Rows </h2> <table class="table table-hover"> <thead> <tr> <td> First Name </td> <td> Last Name </td> <td> Username </td> <td> Email </td> <td> Role </td> <td> Birthday </td> <td> Status </td> <td> Last login </td> </tr> </thead> <tbody> <tr> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> <td> 21/05/1980 </td> <td> Active </td> <td> 19/11/2014 </td> </tr> <tr> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> <td> 21/05/1980 </td> <td> Active </td> <td> 19/11/2014 </td> </tr> <tr> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> <td> 21/05/1980 </td> <td> Active </td> <td> 19/11/2014 </td> </tr> </tbody> </table> <h2 class="docs--section-header"> Condensed Tables </h2> <table class="table table-condensed"> <thead> <tr> <td> First Name </td> <td> Last Name </td> <td> Username </td> <td> Email </td> <td> Role </td> <td> Birthday </td> <td> Status </td> <td> Last login </td> </tr> </thead> <tbody> <tr> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> <td> 21/05/1980 </td> <td> Active </td> <td> 19/11/2014 </td> </tr> <tr> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> <td> 21/05/1980 </td> <td> Active </td> <td> 19/11/2014 </td> </tr> <tr> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> <td> 21/05/1980 </td> <td> Active </td> <td> 19/11/2014 </td> </tr> </tbody> </table> <h2 class="docs--section-header"> Expanded Tables </h2> <div class="text-danger docs--panel docs--panel-danger"> <p> Watch out! Expanded tables includes <strong>a lot</strong> of whitespace. Dont put too many columns in these tables. </p> </div> <table class="table table-expanded"> <thead> <tr> <td> First Name </td> <td> Last Name </td> <td> Username </td> <td> Email </td> <td> Role </td> </tr> </thead> <tbody> <tr> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> </tr> <tr> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> </tr> <tr> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> </tr> </tbody> </table>