Tables

tables.less

Basic table

.table-inner-borders
.table-outer-borders
.table-striped
.table-hover
.table-condensed
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>
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Title</th>
            <th scope="col">Genre</th>
            <th scope="col">Duration</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Metropolis</td>
            <td>Electro Rock</td>
            <td>1:07</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Nebulae</td>
            <td>Ambient</td>
            <td>1:07</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Caprice</td>
            <td>House</td>
            <td>0:31</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2"></td>
            <th scope="row">Total</td>
            <td>3 Songs</td>
        </tr>
    </tfoot>
</table>

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

Options
  • .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.)