Issue with border-color in CSS on Chrome tables

Here is a table style I have defined for selected elements:

tr[selected] {
    background: #FFF;
    border-color: #000000;
    color: #000000;
}

To apply this style, I use JavaScript:

$this.unbind().change(function () {
        element = $(this).parents('tr');
        if ($(this).is(':selected')) element.attr('selected', '');
        else element.removeAttr('selected')
    });
$this.checkbox();

Although it works fine in most cases, I have noticed a strange glitch in Chrome where sometimes, after selecting and unselecting elements, part of the border-color property remains applied:

Expected Result:

https://i.sstatic.net/n9Mmj.png

Actual Result Sometimes:

https://i.sstatic.net/MiQYK.png

Is this issue known? And is there a workaround available?

javascriptjquerycssgoogle-chrome

Answer №1

To ensure that table elements behave as expected in different types of containers, set the style for the tr rows to display: block;. Here is a code snippet that has been effective for me:

tr {
  display: block;
  background: #fff;
  color: #000;
  border: solid 1px #fff;
}
tr[selected] {border: solid 1px #000;}
tr:not([selected]) {border: solid 1px #fff;}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Angular's ng-repeat with varying directives for each iteration

I am trying to utilize ng-repeat within Angular to iterate through multiple <li> elements with a directive embedded. My goal is to have the first two items in the ng-repeat display differently in terms of styling and content compared to the remaining ...

javascripthtmlcssangularjs

Do we need to wait a considerable amount of time for an asynchronous function to run in a request?

I have a specific request that I need to address. The first snippet of code shows a function called handleUpdate1 which uses async/await to run a function named _asyncFuncWillRun10Minutes, causing the client to wait approximately 10 minutes for a response ...

javascriptnode.jsexpressasync-await

Having trouble storing data accurately in local storage using React

I implemented a combination of useContext and useEffect to store useContext data in local storage, but I am facing challenges due to conditional rendering. The scenario involves displaying a sign-in button when the user is not logged in and a log-out butto ...

javascriptreactjsmaterial-ui

Cease the execution within the promise.then block

Embarking on my nodejs journey has been an exciting experience. While I have a background in other programming languages, the concept of promises is new to me. In my nodejs environment, I am using expressjs + sequelize. I'm currently working on setti ...

javascriptnode.jsexpresssequelize.js

Having trouble getting jQuery form validation to recognize the $.post element

I need to create a validation system for my form that covers basic checks like minimum username length, while also ensuring that the username and email are not already in use (requiring a database search). After some trial and error, I've identified ...

jqueryajaxformsvalidationsubmit

What could be causing the issue of loading text not appearing in Vue.js?

I have the following code snippet in my application: <div id="app"> <button v-if="!isPrepared && !isLoading" @click="startLoading()">Start Loading</button> <div v-if="isLoading">Lo ...

javascriptvue.jsvuejs3

Alter the arrow to dynamically point towards the location of the click source

I am currently working on creating a popover dialog that should point to the element triggering its appearance. The goal is for the arrow to align with the middle of the button when clicked. While I am familiar with using CSS to create pointing arrows, th ...

javascriptjqueryhtmlcss

You will encounter a TypeError with the message "Super expression must be null or a function" when attempting to export a named class

I'm experimenting with components. I have a default export in place but now I think I need to create a named class for my next export. Take a look at the code below: export default Users; import React from 'react'; export class UsersTest e ...

javascriptreactjs

Tips for cutting down on bundle size in your WEBPACK setup when using VUEJS

I have tried numerous tutorials to reduce the size of my bundle, but none of them seem to be affecting the bundle size and I can't figure out why. Every time I integrate new code into webpack, the bundle size remains unchanged. (The application is c ...

javascriptvue.jswebpackwebpack-4

Retrieve the li elements using jQuery and access their innerHtml property

In my attempt to showcase the list items and their inner HTML, I came across an issue. For example: <ul class="for"> <li>line 1</li> <li class="second">line 2</li> <li>line 3</li> <li>line 4< ...

jquerydom

Unable to run JavaScript file fetched from cache API

For a web application built using pure vanilla JavaScript without utilizing service workers, I am looking to cache a JavaScript file hosted on an AWS S3 file server explicitly. The script below will be embedded in the index.html file of the application (UR ...

javascripthtmlcachingprogressive-web-apps

Node.js is experiencing difficulties loading the localhost webpage without displaying any error messages

I am having trouble getting my localhost node.js server to load in any browser. There are no errors, just a buffering symbol on the screen. The code works fine in VS Code. Here is what I have: server.js code: const http = require("http"); const ...

javascripthtmlnode.jsexpresslocalhost

Processing of an array received via AJAX and passed to a PHP script, inside a separate function in a different file

I have a JavaScript array that I am sending via AJAX to a PHP file named aux.php. What I want is for this array to be visible and manipulable within a function inside a class in another PHP file called payments.php. I've provided all the code so they ...

javascriptphphtmlarraysajax

Is it possible to modify this to only submit a single answer instead of the entire form in Rails 3 with jQuery and Ajax?

Gratitude goes out to those who guided me through a diagnostic process here. I have updated my code in hopes that it will remain functional across future versions of jQuery. However, there are two concerns on my mind: Have I inadvertently written someth ...

jqueryajaxruby-on-rails-3

Managed the double-click event to select Snap.svg text

I am currently utilizing the snapsvg library for a project where I am implementing the dblclick event to trigger a browser window alert. However, when clicking on the svg canvas, not only does the alert pop up but some text on the canvas also gets selected ...

javascripthtmlevent-handlingdom-eventssnap.svg

Why is my form automatically submitting instead of triggering an AJAX call using jQuery?

When I click submit on my form, I expect an ajax call to show in the console and the page URL to stay the same. However, the form action is triggered and the HTTP call changes the URL. <head> <script src="lib/jquery-1.6.4.min.js" type="text ...

jqueryajax

Scss - Only one for mobile devices

Just dipping my toes into scss and I've got a quick question. Here's the snippet of scss code I'm working with: .page { max-width: 1200px; position: relative; width: 100%; ul{ background-color: black; width ...

csssass

Can all date fields with identical dates be updated simultaneously?

Is it feasible for a user to modify the date in one input and have that change reflected in all other inputs with the same 'initial' attribute? I've made an attempt at it, but haven't quite cracked the code on how to achieve this... ...

javascriptjquery

Error encountered while making a REST API call in Ajax: Unforeseen SyntaxError: Colon unexpected

I am currently troubleshooting my code to interact with a REST API. My platform of choice is "EspoCRM" and I aim to utilize its API functionalities. The official documentation recommends using Basic Authentication in this format: "Authorization: Basic " ...

javascriptajaxjson.htaccessrest

Accordion checkbox with dynamic features

Currently, I am dynamically populating data into a jQuery accordion. My goal is to include a checkbox just before the <h2> text. <div id="checkbox"> <h2> <span> <input type="checkbox" class="mycheck" value="apple" / ...

javascriptjqueryhtmljquery-ui