Looking for a solution to make the border work as expected when hovering over each td in a table like this example: https://jsfiddle.net/nmw82od1/
Here is the CSS code:
.table1 td:hover {
border: 1px solid black;
}
.table2 td:hover {
border: 1px double black;
}
The issue arises when using double border, it only works on cells other than the top row.
Any suggestions for a fix?
The issue at hand is caused by the display property being set to table-cell, which is added by bootstrap. To fix this, simply switch it to display:block. See the updated code snippet below:
UPDATE: Added minor padding to eliminate the jumping effect...
.table1 td:hover {
border: 1px solid black;
padding: 11px 11px;
display: block;
}
.table2 td:hover {
border: 1px double black;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<table class="table1 table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Donald</td>
<td>Duck</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="16727978777a72567263757d3875797b">[email protected]</a></td>
</tr>
<tr>
<td>2</td>
<td>Daisy</td>
<td>Duck</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb9f9a928882bb9f8e9890d5989496">[email protected]</a></td>
</tr>
<tr>
<td>3</td>
<td>Scrooge</td>
<td>McDuck</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="483b2b3a27272f2d08252b2c3d2b23662b2725">[email protected]</a></td>
</tr>
<tr>
<td>4</td>
<td>Gladstone</td>
<td>Gander</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbdcd7dadfc8cfd4d5defbdcdad5dfdec995d8d4d6">[email protected]</a></td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<table class="table2 table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Donald</td>
<td>Duck</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="debab1b0bfb2ba9ebaabbdb5f0bdb1b3">[email protected]</a></td>
</tr>
<tr>
<td>2</td>
<td>Daisy</td>
<td>Duck</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7511141c060c351100161e5b161a18">[email protected]</a></td>
</tr>
<tr>
<td>3</td>
<td>Scrooge</td>
<td>McDuck</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8dbcbdac7c7cfcde8c5cbccddcbc386cbc7c5">[email protected]</a></td>
</tr>
<tr>
<td>4</td>
<td>Gladstone</td>
<td>Gander</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80e7ece1e4f3f4efeee5c0e7e1eee4e5f2aee3efed">[email protected]</a></td>
</tr>
</tbody>
</table>
</div>In an attempt to create a carousel that functions by hiding and showing images when the next and previous buttons are clicked, I have organized my images in a table and assigned the li elements a class of 'li'. There are four images in total, wit ...
I need help with adding alerts using Angular Bootstrap that should dismiss themselves after a certain timeout. However, the alerts are not dismissing on their own. Here's the code snippet: angular.module('ui.services').service('AlertSe ...
Currently, I am developing a node.js web service using Express.js and Mongoose. Recently, I decided to experiment with CoffeeScript to see if it offers any advantages. However, I have come across something that has left me a bit unsettled and I would appre ...
I've encountered an issue with the router-link component in Vue.js 2. I have set up my router file index.js import Vue from 'vue'; import VueRouter from 'vue-router'; import HomeView from '../views/HomeView.vue'; import ...
One of the challenges I faced involved a div element with a conditional *ngIf statement and responsive layout values set using fxFlex.lg="30" fxFlex.xl="50": <div class="project-test__element" *ngIf="myCondition()" ...
After adding routing to my basic app through app.routing.ts, I encountered errors in all of my test files stating that no Router is provided. To resolve the errors, I found that I can add imports: [RouterTestingModule], but is there a way to globally impo ...
Collecting data from an external source via Bluetooth Low Energy using NodeJS (noble module) and storing it in a JSON array file named fromSource.json: [ { "id": 1, "name": "foo", "value": 123 }, { "id": ...
For the past few days, I've been attempting to populate a table using jQuery and ajax based on search results, but unfortunately, it's not working out for me. Below is the HTML code snippet: <form class="form"> <div class="form-gro ...
Hey there! I have a goal in mind: https://i.stack.imgur.com/bnso9.png This is what I currently have: http://codepen.io/KieranRigby/pen/QyWZxV. Make sure to view it in "Full page" mode. label { color: #6d6e70; bottom: 0; } .img-row img { width: 10 ...
Is there a way to retrieve the selected text or its position within a paragraph (<p>)? I'm displaying a text sentence by sentence using a Vue.js loop of paragraphs. <p class="mreadonly text-left mark-context" v-for="line in ...
When working with images, it can be tricky to set the original width while also ensuring it fits within a parent container. For example, if the parent container has a width of 1000px, you may want the image to have a max-width of 100%, but not exceed 1000p ...
Is it possible to display an avatar in the text field of the autocomplete material-ui component when using the getOptionLabel prop, which only accepts a string? The expected UI shows a profile picture and name for each option. Can we achieve the same thi ...
I am working with Material UI and have a grid on the homepage that needs to maintain certain properties regardless of screen size. However, I want to apply a negative margin when the screen reaches 1200px or larger (lg). Currently, the grid is set up like ...
Looking to create a unique webAPP with different content displays based on how it is accessed. If the user opens the webAPP through their Safari browser Or if they open the webAPP from a webclip on their home screen The detection is functioning, as conf ...
I am currently working on a Next.js static site. The JavaScript loads quickly, but there seems to be a delay in applying the styled-components CSS as seen in the screenshot. The CSS only kicks in after the page has fully loaded. Does anyone have any sugge ...
I am working on a controller that organizes song rankings based on sales data. Upon initialization, the controller automatically sends an HTTP GET request to retrieve all the songs needed for display (currently set at the top 20 songs). If I ever need to a ...
I've developed a custom CurrencyInput React component for users to input numeric values. I set the input type to "number", but unfortunately, this only seems to function properly in Chrome (as Firefox still allows non-numeric entries). Here is the co ...
An application I developed can accept faxes in XML format and convert them into JSON objects to extract the necessary information, specifically the base64 string within the "file contents" variable of the document. Here is the code snippet: exports.recei ...
Incorporating Materialize CSS along with Angular's ui.router for state management and HTML rendering has led to a challenge. Specifically, the Materialize Select component is not initialized upon state changes since Materialize components are typicall ...
Encountering issues with the registration component in VueJS. I acquired the component from https://github.com/wanxe/vue-button-spinner via npm install. Subsequently, I integrated the code into my Laravel 5.5 app.js file. The contents of my app.js: requi ...