Ajout de la classe table-fixedwidth pour contraindre le tableau dans son conteneur
table-fixedwidth
Ajout de la classe table-fixedwidth et des classes cell-action, cell-xs, cell-sm, cell-md, cell-lg, cell-xlg ou cell-date sur les lignes du tableau pour définir leurs tailles.
cell-action, cell-xs, cell-sm, cell-md, cell-lg, cell-xlg ou cell-date
Utilisation de la classe table-fitcontent et d'une déclarartion de taille en pixel pour créer un tableau à taille fixe
table-fitcontent
<table class="table table-bordered table-striped table-fitcontent"> <colgroup> <col style="width: 40px;"> <col style="width: 40px;"> <col style="width: 100px;"> <col style="width: 100px;"> <col style="width: 100px;"> <col style="width: 100px;"> <col style="width: 60px;"> </colgroup> <thead> ...
Ajout des classestable-multipleline-header et table-multipleline-body pour permettre aux contenus de passer sur plusieurs lignes
table-multipleline-header et table-multipleline-body
Un tableau peut également être inclus dans un conteneur possédant la classe table-responsive pour lui permettre de scroller à l'intérieur de celui-ci. Cette technique peut cependant provoquer des effets indésirables si le tableau possède des éléments flottants (liste déroulantes, infobulles).
table-responsive
Les icones possédant un fond peuvent être affichées sous forme de bouton avec le même comportement au survol et au clic que les boutons d'actions.
<button class="btn btn-lg btn-icon btn-icon-secondary"> <span class="am-icon icon-reset-circle-right"></span> </button> <button class="btn btn-lg btn-icon btn-icon-secondary"> <span class="am-icon icon-reset-circle-left"></span> </button> <button class="btn btn-lg btn-icon btn-icon-secondary"> <span class="am-icon icon-help-circle"></span> </button> <button class="btn btn-lg btn-icon btn-icon-secondary"> <span class="am-icon icon-alert-circle"></span> </button> <button class="btn btn-lg btn-icon btn-icon-secondary"> <span class="am-icon icon-info-circle"></span> </button> <button class="btn btn-lg btn-icon btn-icon-secondary"> <span class="am-icon icon-plus-circle"></span> </button> <button class="btn btn-lg btn-icon btn-icon-secondary"> <span class="am-icon icon-cross-circle"></span> </button> <button class="btn btn-lg btn-icon btn-icon-secondary"> <span class="am-icon icon-minus-circle"></span> </button> <button class="btn btn-lg btn-icon btn-icon-secondary"> <span class="am-icon icon-cross-square"></span> </button> <button class="btn btn-lg btn-icon btn-icon-secondary"> <span class="am-icon icon-plus-square"></span> </button> <button class="btn btn-lg btn-icon btn-icon-secondary"> <span class="am-icon icon-minus-square"></span> </button>