<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script type="text/javascript" src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script> <div class="container"> <div class="row"> <h2>Tables Test</h2> <table class="table table-bordered" id="test"> <thead> <tr><th>Heading1</th> <th>Heading2</th> <th>Heading3</th> <th>Heading4</th> <th>Heading5</th> </tr> </thead> <tbody> <tr> <td>00</td> <td>01</td> <td>02</td> <td>03</td> <td>04</td> </tr> <tr> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>20</td> <td>21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td>30</td> <td>31</td> <td>32</td> <td>33</td> <td>34</td> </tr> <tr> <td>40</td> <td>41</td> <td>42</td> <td>43</td> <td>44</td> </tr> </tbody> </table> </div> </div>

tr:hover { background-color: #ffff99; }

$(document).ready(function(){ $("#test").dataTable(); })