Petal

Tables

tables.less

Basic table

Preview Optional Classes

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

Customizable options

// tables
@table-border-color: @gray;
@table-bg-color-light: @background-color-light;
@table-bg-color-dark: lighten(@background-color-dark,10%);
@table-row-highlight-bg-color-light: darken(@table-bg-color-light,5%);
@table-row-highlight-bg-color-dark: lighten(@table-bg-color-dark,5%);