Hover rows style with Bootstrap

Hover rows

Add .table-hover to enable a hover state on table rows within a <tbody>.


<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!-- w w  w .ja v a  2  s .  co m-->
<body style='margin: 20px;'>

  <table class="table table-hover">
    <caption>This is the caption.</caption>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Click to view the demo





















Home »
  Bootstrap »
    Bootstrap »




Introduction
Basic HTML Style
List
Table
Form
Layout
Navigation Bar
Button
Control