Hover effect on a single cell in a Bootstrap table

Question

Hover effect on a single cell in a Bootstrap table

As I was working on creating a calendar design, I found myself pondering how to incorporate a hover effect using Bootstrap 4 for the cells.

Here is a preview of the current calendar design

I am aiming to achieve a hover effect similar to Bootstrap's Hoverable rows without altering Bootstrap's CSS.

Do you have any suggestions on achieving this effect? Also, is there a way to ensure that the table has completely symmetrical (square) cells?

EDIT:

table td:hover {
    background-color: rgba(0,0,0,.075);
}

It seems that the code mentioned above is not producing the desired outcome. The cell should display a darker blue color, rather than gray.

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

Here is a way to achieve that:

table td:hover {
    background-color: rgba(0,0,0,.075);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
  </tr>
</thead>
<tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
  </tr>
  <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
  </tr>
  <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
  </tr>
</tbody>
</table>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Answer 2

Here is a way to achieve that:

table td:hover {
    background-color: rgba(0,0,0,.075);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
  </tr>
</thead>
<tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
  </tr>
  <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
  </tr>
  <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
  </tr>
</tbody>
</table>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Hover effect on a single cell in a Bootstrap table

Answer №1

Similar questions

The process of increasing value through a function in PHP

Issue with Vue 3: Button components fail to update upon modification of second dropdown menu

Tips on incorporating a style-tag into the body of an Angular 5 application

Steps for creating a jQuery function that responds to changes in a text box value

Create a JavaScript array by extracting IDs from an HTML document

New to CSS Media Queries? Discover the Correct Way to Define Element Height!

When a Grid Item is enclosed in a link, it does not extend over rows

Should we make it a routine to include shared sass variables in each vue component for better practice?

Using Vue and vue-multiselect to create interactive options based on the selected language

The FaceBook modal is failing to appear

Issue encountered with ngFor: 'Identifier not defined __type does not have any such member'

The SQL query containing 6 SELECT statements combined with UNION operation resulted in a total of 2 rows being

What is the best way to implement a hover effect on multiple rows within an HTML table using Angular?

Server blocking access to Javascript files

Exploring the process of querying two tables simultaneously in MySQL using PHP

Tips for implementing a jQuery mouseleave function for multiple div elements sharing the same id

Overflow of nested item within flex container

Range slider position not being updated after user interaction

Is it possible to show the Display Center within the dropdown menu?

How can I create a rectangular border around text using the HTML5 canvas?