DataTables

DataTables Examples

HTML

<title>
  Example 1 - apply dataTable()</title>

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">


<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>


</head>

<body>
  <div class="container">

    <table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
      <thead>
        <tr>
          <th>Country</th>
          <th>Value1</th>
          <th>Value2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Brazil</td>
          <td>500<br>500<br>500<br></td>
          <td>200</td>
        </tr>
        <tr>
          <td>Russia</td>
          <td>501</td>
          <td>201</td>
        </tr>
        <tr>
          <td>India</td>
          <td>502</td>
          <td>202</td>
        </tr>
        <tr>
          <td>China</td>
          <td>503</td>
          <td>203</td>
        </tr>
      </tbody>
    </table>

  </div>
</body>

CSS

#example {
  table-layout:fixed;
}
#example > tbody > tr > td {
  height: 30px !important;
  overflow: hidden;
  white-space: nowrap;
}
#example > tbody > tr > td  > br {
  display: normal;
}

JavaScript

$(document).ready(function() {
  $('#example').dataTable();
});