Tables should be wrapped in a <div class="table-wrapper"> <!--table goes in here --> </div> with a class .table-wrapper

<div class="table-wrapper"></div> should basically contain tree first level container divs.

• <div class="table-toolbar"></div> -- Its optional. Should be used to hold table related action buttons as in below example.
• <div class="table-content"></div> -- This should hold the table. <tfoot></tfoot> should not be the part of table.
• <div class="table-footer"></div> -- This should hold table footer content which normally exists in <tfoot></tfoot>

Tables must be created with the classes "table" and "table-striped" and contain <thead>, <tbody> tags only, preferably in that order and should be wrapped in <div class="table-content"></div>.

<tfoot> contents should go in <div class="table-footer"></div> and be placed immediately after <div class="table-content"></div>.

To control the width of individual column use <col> tag nested inside <colgroup></colgroup>. Refer the code below. <col> accepts "width" attribute and the value can specified in "%", "px" or "relative units"

For table group heading add <tr></tr> as first element of <thead> and add class "has-table-group" to <thead>

      <div class="table-wrapper">
        <div class="table-toolbar">
          <!-- Table action button or filters -->
          <button type="button" class="btn btn-filter">
            Filter
          </button>
          <div class="toolbar-filter">
            <!--Toolbar related any content goes in here. This content toggles on above filter button-->
          </div>
        </div>
        <div class="table-content">
          <table class="table table-striped">
            <colgroup>
              <col width="20%">
              <col width="30%">
              <col width="50%">
            </colgroup>
            <thead class="has-table-group">
            <tr>
              <th colspan="2"></th>
              <th>Title</th>
            </tr>
            <tr>
              <th>
                Column 1, width = 20%
              </th>
              <th>
                Column 2, width = 30%
              </th>
              <th>
                Column 3, width = 50%
              </th>
            </tr>
            <tr class="filter">
              <th>
                <div class="form-group">
                  <input class="form-control" type="text" id="col1_filter" name="col1_filter">
                </div>
              </th>
              <th>
                <div class="form-group">
                  <input class="form-control" type="text" id="col2_filter" name="col2_filter" value=" ">
                </div>
              </th>
              <th>
                <div class="form-group">
                  <input class="form-control" type="text" id="col3_filter" name="col3_filter">
                </div>
              </th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>
                Cell 1
              </td>
              <td>
                Cell 2
              </td>
              <td>
                Cell 3
              </td>
            </tr>
            <tr>
              <td>
                Cell 4
              </td>
              <td>
                Cell 5
              </td>
              <td>
                Cell 6
              </td>
            </tr>
            <tr>
              <td>
                Cell 7
              </td>
              <td>
                Cell 8
              </td>
              <td>
                Cell 9
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <div class="table-footer">
          <!--Table Footer contents of <tfoot> should be place here-->
        </div>
      </div>
      

Tables that can have their rows re-ordered by a user (as by using the jQuery UI sortable component) must have an empty cell at the start of every row (<th> in the <thead> section and <td> in the <tfoot> and <tbody> sections).

        
        <div class="table-wrapper">
          <div class="table-content">
            <table class="table table-striped table-handles">
              <thead>
              <tr>
                <th class="handle"></th>
                <th>
                  Column 1
                </th>
                <th>
                  Column 2
                </th>
                <th>
                  Column 3
                </th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td class="handle"></td>
                <td>
                  Cell 1
                </td>
                <td>
                  Cell 2
                </td>
                <td>
                  Cell 3
                </td>
              </tr>
              <tr>
                <td class="handle"></td>
                <td>
                  Cell 4
                </td>
                <td>
                  Cell 5
                </td>
                <td>
                  Cell 6
                </td>
              </tr>
              <tr>
                <td class="handle"></td>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <div class="table-footer">
            <div class="col-md-9"></div>
            <div class="col-md-3"></div>
          </div>
        </div>
        
      

Tables that can have columns sorted by a user must use the appropriate sorting handles in each of the column headings that can be sorted (the <th> elements in the <thead> element). Each <th> element must have a class of "sorting" and an optional class based on the sorting capability and currently active sort as detailed below.

Table with horizontal scrolling.

        
        <div class="table-wrapper">
          <div class="table-content">
            <table class="table table-striped">
              <thead>
              <tr>
                <th>
                  Column
                </th>
                <th>
                  Class
                </th>
              </tr>
              </thead>

              <tbody>
              <tr>
                <td>
                  Can be sorted but is not the currently active sorted column.
                </td>
                <td>
                  No class required
                </td>
              </tr>
              <tr>
                <td>
                  Is currently sorted ascending.
                </td>
                <td>
                  sorting-asc
                </td>
              </tr>
              <tr>
                <td>
                  Is currently sorted descending.
                </td>
                <td>
                  sorting-desc
                </td>
              </tr>
              <tr>
                <td>
                  Can be sorted but sorting is currently disabled
                </td>
                <td>
                  sorting-disabled
                </td>
              </tr>
              <tr>
                <td>
                  Can only be sorted ascending but is not the currently active sorted column.
                </td>
                <td>
                  sorting-desc-disabled
                </td>
              </tr>
              <tr>
                <td>
                  Can only be sorted ascending and is the currently active sorted column.
                </td>
                <td>
                  sorting-desc-disabled-asc
                </td>
              </tr>
              <tr>
                <td>
                  Can only be sorted descending but is not the currently active sorted column.
                </td>
                <td>
                  sorting-asc-disabled
                </td>
              </tr>
              <tr>
                <td>
                  Can only be sorted descending and is the currently active sorted column.
                </td>
                <td>
                  sorting-asc-disabled-desc
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <div class="table-footer">
            <ul class="pagination pull-right">
              <li><span class="glyphicon glyphicon-pagination-first"></span></li>
              <li class="disabled"><span class="glyphicon glyphicon-pagination-prev"></span></li>
              <li class="active"><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
              <li><a href="#" class="glyphicon glyphicon-pagination-next"></a></li>
              <li><a href="#" class="glyphicon glyphicon-pagination-last"></a></li>
            </ul>
          </div>
        </div>
        
      

• Points:
  • Filter row

Tables that can have columns filtered by a user must add a second row to the <thead> element with a class of "filter" that contains <th> elements containing the appropriate <a href="/docs/components/forms.html#forms">form elements</a> without their accompanying labels.

        
        <div class="table-wrapper">
          <div class="table-toolbar">
            <button type="button" class="btn btn-filter">
              Filter
            </button>
          </div>

          <div class="form-row table-content">
            <table class="table table-striped">
              <thead>
              <tr class="filter">
                <th>
                  <div class="form-group checkbox no-label">
                    <input type="checkbox" class="form-control filter" value="true">
                    <label><span class="checkbox-icon"></span></label>
                  </div>
                </th>
                <th>
                  Column 2
                </th>
                <th>
                  Column 3
                </th>
              </tr>
              <tr class="filter">
                <th>
                  <div class="form-group">
                    <input class="form-control" type="text" id="col1_filter" name="col1_filter" value="Hello World">
                  </div>
                </th>
                <th>
                  <div class="form-group">
                    <input class="form-control" type="text" id="col2_filter" name="col2_filter">
                  </div>
                </th>
                <th>
                  <div class="form-group">
                    <input class="form-control" type="text" id="col3_filter" name="col3_filter">
                  </div>
                </th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>
                  Cell 1
                </td>
                <td>
                  Cell 2
                </td>
                <td>
                  Cell 3
                </td>
              </tr>
              <tr>
                <td>
                  <div class="form-group">
                    <input class="form-control" type="text" id="col4_filter" name="col1_filter">
                  </div>
                </td>
                <td>
                  <div class="form-group">
                    <input class="form-control" type="text" id="col5_filter" name="col1_filter">
                  </div>
                </td>
                <td>
                  <div class="form-group">
                    <input class="form-control" type="text" id="col6_filter" name="col1_filter">
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <div class="table-footer">

          </div>
        </div>