Bootstrap Tutorial - Style table hover








The following code shows how to style table hover.

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
  href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<style type='text/css'>
td.vcenter {<!--from  w  w w. ja  va 2 s  . co  m-->
  vertical-align: middle;
}
</style>
</head>
<body style='margin:30px'>
  <div>
    <table id="mytb" class="table table-hover table-condensed">
      <thead>
        <tr>
          <th style="width: 25%;">A</th>
          <th style="width: 40%">B</th>
          <th style="width: 35%">C</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Blah</td>
          <td>Blah More</td>
          <td class="vcenter">blahA</td>
        </tr>
        <tr>
          <td>Blah</td>
          <td>Blah More</td>
          <td class="vcenter">blahB</td>
        </tr>
        <tr>
          <td>Blah</td>
          <td>Blah More</td>
          <td class="vcenter">blahC</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Click to view the demo