Adjust the width of the table by utilizing the border-collapse property set to collapse

I am completely baffled by this situation. Whenever I adjust the border-width of a table (either dynamically with JavaScript or in Chrome Dev Tools) where border-collapse: collapse; is set, transitioning from a border width of 1px (#1) to a larger value (#2) and then back to 1px (#3), I encounter a visual defect. Despite #1 and #3 being the same, they appear differently. What could be causing this?

HTML: 

<table style="border-collapse: collapse; width: 1px #ddd solid;">
    <tbody>
        <tr>
            <td>
                <a href="javascript:void(0);">Crazy Button</a>
            </td>
        </tr>
    </tbody>
</table>

Check out the working demo here

htmlcsshtml-tableborder

Answer №1

A creative hack to refresh the item visually:

element.style.visibility = 'hidden';
element.offsetHeight; 
element.style.visibility = 'visible';

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

What is the best way to create a taskbar using HTML or Javascript?

I'm currently developing an innovative online operating system and I am in need of a functional taskbar for user convenience. The ideal taskbar would resemble the Windows taskbar, located at the bottom of the screen with various applications easily ac ...

javascripthtmlwebtaskbar

How can I include a ?ref query parameter in a URL when linking from external websites?

I've always wondered about how websites are able to include the ?ref parameter in their URLs when they are referred from another website. Do both sites need to incorporate this into their code? How does this function exactly? ...

phphtmlurlreferer

Embedding a picture logo within a CSS-designed content box

I am trying to create a unique layout for my website that reveals content using labelled radio buttons, without the use of scripts. Instead of using <a href='#'>, I want to achieve a specific layout like the one shown in this example. When ...

htmlcsstabs

Automate your functions using Javascript!

Hello, I have written a code snippet that triggers an action on mouse click. Initially, I created a function that scrolls the screen to a specific element upon clicking another element: (function($) { $.fn.goTo = function() { $('html, bo ...

javascriptjqueryhtmltwitter-bootstrapfunction

Leveraging jQuery to manipulate an SVG file

jQuery is designed to work within HTML pages that contain JavaScript code. While SVG and HTML both use the same DOM Level 2, SVG is XML-based and employs ECMAScript. What potential issues could arise from utilizing jQuery with SVG? Is it more advisable t ...

javascriptjqueryhtmldomsvg

Some characters are not compatible with the CSS writing-mode feature

There seems to be an issue with the CSS writing mode not applying correctly to the symbol '№'. Here is an example: <html> <head></head> <body> <p style="writing-mode: vertical-lr;"> Номер № ...

css

"Implementing a 960 Grid System with an HTML5 Header Element

Exploring 960.gs and HTML5 as a beginner has led to some challenges. My current project involves an image spanning 2 grid units, followed by a div taking up 5 units on the same line, with a line break needed before displaying a heading. I attempted the la ...

csshtml960.gs

What is the method for aligning a button label to the left and an icon to the right?

I have a list of items and I want to display label text on the left and a check icon on the right. This works fine when the text is short, but when I added the textOverflow property, the icon gets hidden along with the rest of the text. Here is my list ...

htmlcssreactjs

Interacting with HTML5 canvas using object events

How can I assign an event handler to an element created on the HTML5 Canvas without having to manually track specific coordinates? ...

htmlcanvas

Angular-UI keypress event allows users to interact with components and

I am facing challenges while using the keypress feature in the following code snippet- <div ng-controller="GBNController"> ... <input id="search-field" type="text" placeholder="JSON Query" ng-model="queryText" ui-keypress="{enter: foo()}"/> .. ...

javascripthtmlangularjs

detect mouse click coordinates within an iframe that spans multiple domains

I am currently encountering an issue with tracking click position over a cross-domain iframe. Here is my current code: <div class="poin"> <iframe width="640" height="360" src="http://cross_domain" frameborder="0" allowfullscreen id="video">< ...

javascriptjqueryhtmliframecross-domain

Execute Cheerio selector once the page has finished loading

Hey there! I'm trying to extract the URL value of an iframe on this website: I've checked the view page source but couldn't find the iframe. Looks like it's loaded after the page is fully loaded through JavaScript. Could it be that ...

javascripthtmlnode.jsweb-scrapingcheerio

The CSS does not get applied to the returned element in Next JS

When I create a function to return a DOM element with an associated className, the local style doesn't seem to be applied. For example: export default function thing(){ const elem = function(){ return (<div className="myCss">Hello< ...

cssreactjsnext.jsstyled-jsx

Unusual phenomenon in ASP.NET: Adding Debug=true in the web.config file results in CSS modifications

As the question suggests: After including debug=true in my web.config file (without making any other alterations to the code), my page is displayed without a background color. Can anyone shed light on why this might be happening? ...

cssasp.netdebuggingweb-config

Adding a line and text as a label to a rectangle in D3: A step-by-step guide

My current bar graph displays values for A, B, and C that fluctuate slightly in the data but follow a consistent trend, all being out of 100. https://i.stack.imgur.com/V8AWQ.png I'm facing issues adding lines with text to the center of each graph. A ...

javascriptcssd3.js

Place centered items within a flexbox that uses space-between alignment

When designing a navigation section, I am looking to achieve space-between justification. However, for smaller screens where the navigation items may need to wrap onto multiple rows, I want the items to center themselves instead of aligning to the left whe ...

cssmobiledynamicflexbox

How can we use withStyles to customize the styling of a selected ListItem in ReactJS and Material UI?

I am seeking assistance in changing the style of a specific ListItem, similar to what is demonstrated in this Codesandbox. In the Codesandbox example, a global CSS stylesheet is utilized, but I prefer to implement the changes using the withStyle techniqu ...

cssreactjsmaterial-uijsshigher-order-components

My @media queries are causing me some issues

Struggling with my @media queries. Once I upload my website on github, it fails to scale properly. However, when testing it in Webstorm (JetBrains), everything seems to be working fine. Any assistance would be greatly appreciated! Here is the link to my w ...

htmlcsswebscalemedia

The measure of the leaflet map's vertical dimension in a Shiny module application

I'm facing an issue while trying to incorporate my small app as a module within my larger app. Everything seems to be working fine except for the height of the leaflet map. In the standalone app, I had: ui <- fluidPage( tags$style(type = "te ...

cssshinymoduleleafletheight

Utilize flex to position content at the bottom

My layout features a fixed header and footer, positioned at the top and bottom respectively. The content section in between fills the remaining space, with a scrollbar available if the content extends beyond the area. <div id="app"> <d ...

cssflexbox