Basic table

Optional Table Caption
# Title Artist Genre Duration BPM
1 Metropolis zvuc Electro Rock 1:07 140
2 Nebulae zvuc Ambient 1:07 120
3 Caprice zvuc House 0:31 124
Total 3 Songs

ID Number User Name Videos Join Date View User Detail
00124 David 12 2012/01/01
00125 Simon 5 2013/04/18
00128 Anton 8 2014/08/15
00131 Tyler 15 2014/05/17
<table class="table">
  <caption>Optional Table Caption</caption>
      <th scope="col">#</th>
      <th scope="col">Title</th>
      <th scope="col">Genre</th>
      <th scope="col">Duration</th>
      <td>Electro Rock</td>
      <td colspan="2"></td>
      <th scope="row">Total</td>
      <td>3 Songs</td>

Simple table styling is provided when you add .table class to the <table> element. Append optional classes as needed on the table element.

  • .table-inner-borders : Add inner vertical borders inbetween cells
  • .table-outer-borders : Add outer border around the table
  • .table-striped : Alternating row background colors
  • .table-hover : Highlight background color of row when hovered
  • .table-condensed : Reduce vertical padding of cells

Adjusting column widths

Add .fit class to <colgroup>, <col>, <th> or <td> to shrink the width of the column to the minimum. This will likely cause line breaks in long text strings: to prevent, .nowrap on <th> or <td> tags. (Note: Adding .nowrap to <colgroup> or <col> won't have any effect.)