How to Use CSS Naming Rules Basic Styles Components
Elements
Button Input Radio&Checkbox On-off Select Datetimepicker Dropdown
Layout
Grid Form
Data Display
Tab Table Pagination Badge Process
Feedback
Dialog Message Tooltip PopConfirm Loader
Other
Breadcrumb SideNav
I18N

Table

Default Table

Name Age Address
Jay 23 New York
Mike 43 London
Larry 18 Sidney
3 Employees 

  <table class="z-table">
      <thead>
          <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Address</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>Jay</td>
              <td>23</td>
              <td>New York</td>
          </tr>
          <tr>
              <td>Mike</td>
              <td>43</td>
              <td>London</td>
          </tr>
          <tr>
              <td>Larry</td>
              <td>18</td>
              <td>Sidney</td>
          </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>3 Employees</td>
          <td></td>
          <td></td>
        </tr>
      </tfoot>
  </table>

No lines

Name Age Address
Jay 23 New York
Mike 43 London
Larry 18 Sidney 

  <table class="z-table no-line">
      ...
  </table>

Bordered

Name Age Address
Jay 23 New York
Mike 43 London
Larry 18 Sidney 

  <table class="z-table bordered">
      ...
  </table>

Vertical lines

Name Age Address
Jay 23 New York
Mike 43 London
Larry 18 Sidney 

  <table class="z-table lined">
      ...
  </table>

Hover effect

Name Age Address
Jay 23 New York
Mike 43 London
Larry 18 Sidney 

  <table class="z-table hover">
      ...
  </table>

Stripped

Name Age Address
Jay 23 New York
Mike 43 London
Larry 18 Sidney
Tony 22 Beijing
Jane 32 Paris 

  <table class="z-table stripped">
      ...
  </table>

Dark thead

Name Age Address
Jay 23 New York
Mike 43 London
Larry 18 Sidney 

  <table class="z-table">
      <thead class="dark"> 
        ... 
      </thead>
      <tbody> 
        ... 
      </tbody>
  </table>

Collapsed


    <table class="z-table collapsed">
        ...
    </table>

Condensed Table

Name Age Address
Jay 23 New York
Mike 43 London
Larry 18 Sidney 

  <table class="z-table condensed">
      ...
  </table>

Cell Status

Name Age Status
Jay 23 Pending
Mike 32 Approved
Larry 22 None
Tony 18 Denied 

  <table class="z-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jay</td>
        <td>23</td>
        <td class="warning">Pending</td>
      </tr>
      <tr class="success">
        <td>Mike</td>
        <td>32</td>
        <td>
          <i class="fa fa-check font18"></i>
          Approved
        </td>
      </tr>
      <tr>
        <td>Larry</td>
        <td>22</td>
        <td>None</td>
      </tr>
      <tr class="error">
        <td>Tony</td>
        <td>18</td>
        <td>
          <i class="fa fa-close font18"></i>
          Denied
        </td>
      </tr>
    </tbody>
  </table>

Row selection

Name Age Address
Jay 23 New York
Mike 43 London
Larry 18 Sidney 
  <!-- html -->
  <table class="z-table" id="my-table">
      <thead>
          <tr>
              <th width="10">
                  <label class="z-checkbox">
                      <input type="checkbox"></input>
                      <span></span>
                  </label>
              </th>
              <th>Name</th>
              <th>Age</th>
              <th>Address</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>
                  <label class="z-checkbox">
                      <input type="checkbox"></input>
                      <span></span>
                  </label>
              </td>
              <td>Jay</td>
              <td>23</td>
              <td>New York</td>
          </tr>
          <tr>
              <td>
                  <label class="z-checkbox">
                      <input type="checkbox"></input>
                      <span></span>
                  </label>
              </td>
              <td>Mike</td>
              <td>43</td>
              <td>London</td>
          </tr>
          <tr>
              <td>
                  <label class="z-checkbox">
                      <input type="checkbox"></input>
                      <span></span>
                  </label>
              </td>
              <td>Larry</td>
              <td>18</td>
              <td>Sidney</td>
          </tr>
      </tbody>
  </table>
      
  // javascript
  $('#my-table tbody').find('[type=checkbox]').on('change', function(event) {
    if ($(this).prop('checked') === true) {
      $(this).closest('tr').addClass('selected');
    } else {
      $(this).closest('tr').removeClass('selected');
    }
  });

  $('#my-table thead').find('[type=checkbox]').on('click', function(event) {
    if ($(this).prop('checked') === true) {
      $('#my-table tbody').find('[type=checkbox]').prop('checked', true);
      $('#my-table tbody > tr').addClass('selected');
    } else {
      $('#my-table tbody').find('[type=checkbox]').prop('checked', false);
      $('#my-table tbody > tr').removeClass('selected');
    }
  });