content logo

Bootstrap Tables:

Bootstrap Table with Cell Hover Effect

Today, tables are the most commonly used method for organizing data in a website. It is a simple concept and works perfectly. You can use tables to compare different groups, define words, categorize your data and more. A table doesn’t really have to be anything special as the people are mostly looking at the data inside the table. Any busy effects and colourful background will only distract the person while they actually need to be focused on the content itself. Of course, that doesn’t mean you should have a table without any effects. Too much simplicity is also boring so try to add a little spice to things at least.

In this post, we have a code for you which is designed to help you add in a table with Bootstrap cell hovering effect to your website. Sometimes, a cell in your table seems more important and you feel the need to highlight it. well, in that case, our Bootstrap table cell highlight has got you covered. This Bootstrap table cell mouse move works in a way that whenever you hover your mouse cursor over a cell in the table, it changes colour. This way, you always know which cell is currently being selected.

#

Bootstrap Table Cell Highlight

#

Bootstrap Cell Hovering Effect

#

Bootstrap Table Cell Mouse Move

<!-- This script got from frontendfreecode.com -->
<div class="container-fluid">

  <!-- Table hover cell -->
  <table class="table table-bordered table-hover-cells">
    <caption>
      <code>table.table-hover-cells</code>
    </caption>
    <thead>
      <tr>
        <th>#</th><th>Field 1</th><th>Field 2</th><th>Field 3</th>
      </tr>
    </thead>
    <tbody>
        <tr class="active"><th scope="row">1</th><td>Data 1</td><td>ABC</td><td>01/01/2015</td></tr>
        <tr><th scope="row">2</th><td>Data 2</td><td>DEF</td><td>02/01/2015</td></tr>
        <tr><th scope="row">3</th><td>Data 3</td><td >GHI</td><td>03/01/2015</td></tr>
    </tbody>
  </table>
  
  <!-- Table hover + Table hover cell -->
  <table class="table table-bordered table-hover table-hover-cells">
    <caption>
      <code>table.table-hover.table-hover-cells</code>
    </caption>
    <thead>
      <tr>
        <th>#</th><th>Field 1</th><th>Field 2</th><th>Field 3</th>
      </tr>
    </thead>
    <tbody>
        <tr class="active"><th scope="row">1</th><td>Data 1</td><td>ABC</td><td>01/01/2015</td></tr>
        <tr><th scope="row">2</th><td>Data 2</td><td>DEF</td><td>02/01/2015</td></tr>
        <tr><th scope="row">3</th><td>Data 3</td><td>GHI</td><td>03/01/2015</td></tr>
    </tbody>
  </table>
  
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
.table-hover-cells > tbody > tr > th:hover,
.table-hover-cells > tbody > tr > td:hover {
  background-color: #f5f5f5;
}

.table-hover-cells > tbody > tr > th.active:hover,
.table-hover-cells > tbody > tr > td.active:hover,
.table-hover-cells > tbody > tr.active > th:hover,
.table-hover-cells > tbody > tr.active > td:hover {
  background-color: #e8e8e8;
}

.table-hover.table-hover-cells > tbody > tr:hover > th:hover,
.table-hover.table-hover-cells > tbody > tr:hover > td:hover {
  background-color: #e8e8e8;
}

.table-hover.table-hover-cells > tbody > tr.active:hover > th:hover,
.table-hover.table-hover-cells > tbody > tr.active:hover > td:hover {
  background-color: #d8d8d8;
}

h1 > .divider:before,
h2 > .divider:before,
h3 > .divider:before,
h4 > .divider:before,
h5 > .divider:before,
h6 > .divider:before,
.h1 > .divider:before,
.h2 > .divider:before,
.h3 > .divider:before,
.h4 > .divider:before,
.h5 > .divider:before,
.h6 > .divider:before {
  color: #777;
  content: "\0223E\0020";
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style>
.table-hover-cells > tbody > tr > th:hover,
.table-hover-cells > tbody > tr > td:hover {
  background-color: #f5f5f5;
}

.table-hover-cells > tbody > tr > th.active:hover,
.table-hover-cells > tbody > tr > td.active:hover,
.table-hover-cells > tbody > tr.active > th:hover,
.table-hover-cells > tbody > tr.active > td:hover {
  background-color: #e8e8e8;
}

.table-hover.table-hover-cells > tbody > tr:hover > th:hover,
.table-hover.table-hover-cells > tbody > tr:hover > td:hover {
  background-color: #e8e8e8;
}

.table-hover.table-hover-cells > tbody > tr.active:hover > th:hover,
.table-hover.table-hover-cells > tbody > tr.active:hover > td:hover {
  background-color: #d8d8d8;
}

h1 > .divider:before,
h2 > .divider:before,
h3 > .divider:before,
h4 > .divider:before,
h5 > .divider:before,
h6 > .divider:before,
.h1 > .divider:before,
.h2 > .divider:before,
.h3 > .divider:before,
.h4 > .divider:before,
.h5 > .divider:before,
.h6 > .divider:before {
  color: #777;
  content: "\0223E\0020";
}
</style>

</head>
<body>
<div class="container-fluid">

  <!-- Table hover cell -->
  <table class="table table-bordered table-hover-cells">
    <caption>
      <code>table.table-hover-cells</code>
    </caption>
    <thead>
      <tr>
        <th>#</th><th>Field 1</th><th>Field 2</th><th>Field 3</th>
      </tr>
    </thead>
    <tbody>
        <tr class="active"><th scope="row">1</th><td>Data 1</td><td>ABC</td><td>01/01/2015</td></tr>
        <tr><th scope="row">2</th><td>Data 2</td><td>DEF</td><td>02/01/2015</td></tr>
        <tr><th scope="row">3</th><td>Data 3</td><td >GHI</td><td>03/01/2015</td></tr>
    </tbody>
  </table>
  
  <!-- Table hover + Table hover cell -->
  <table class="table table-bordered table-hover table-hover-cells">
    <caption>
      <code>table.table-hover.table-hover-cells</code>
    </caption>
    <thead>
      <tr>
        <th>#</th><th>Field 1</th><th>Field 2</th><th>Field 3</th>
      </tr>
    </thead>
    <tbody>
        <tr class="active"><th scope="row">1</th><td>Data 1</td><td>ABC</td><td>01/01/2015</td></tr>
        <tr><th scope="row">2</th><td>Data 2</td><td>DEF</td><td>02/01/2015</td></tr>
        <tr><th scope="row">3</th><td>Data 3</td><td>GHI</td><td>03/01/2015</td></tr>
    </tbody>
  </table>
  
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview