table


Basic Table

Most tables should follow this format.

table celltable celltable cell
table celltable celltable cell
table celltable celltable cell
table.table
    tr
      td
        | table cell
      td
        | table cell
      td
        | table cell
    tr
      td
        | table cell
      td
        | table cell
      td
        | table cell
    tr
      td
        | table cell
      td
        | table cell
      td
        | table cell

Dense Information Table

Some tables contain many columns of dense information. Adding the .table-bordered class enures that each column is clearly defined on desktop. Wrap the table in a div with the .table-responsive class to make it scroll horizontal on mobile.

table celltable celltable cell
table celltable celltable cell
table celltable celltable cell
.table-responsive
  table.table.table-striped.table-bordered.table-hover
    tr
      td
        | table cell
      td
        | table cell
      td
        | table cell
    tr
      td
        | table cell
      td
        | table cell
      td
        | table cell
    tr
      td
        | table cell
      td
        | table cell
      td
        | table cell