nodes-ui

--- title: Responsive Tables layout: nested-component.html --- <h1 class="docs--page-header">Responsive Tables</h1> <p class="docs--page-description"> Tables are not responsive by default. Both of our responsive solutions does have some implications, so we prefer that you choose to use them actively. </p> <h2 class="docs--section-header"> Horizontally scrolling tables </h2> <p class="docs--section-description"> Wrap a table in a <code><div></code> with <code>.table-responsive</code> and the table itself will keep it's natural width, while the wrapping div will have horizontal scrolling. </p> <div class="table-responsive"> <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> </div> <h2 class="docs--section-header"> Collapsing Whitespace tables </h2> <p class="docs--section-description"> Add a <code>.table-collapse</code> to the actual table to have it's paddings and fontsize shrink at small breakpoints. </p> <table class="table table-collapse"> <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>