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

Once AJAX/GET has been utilized, further execution of jq functions such as .click may not be

I'm facing an issue with AJAX/GET code. After reloading data from a PHP file using jQuery, I have another block of code that my problem lies in the fact that after reloading data from MySQL/PHP server while the page refreshes, I can't use functio ...

phpjqueryhtmlajax

Enhancing user interfaces with jQuery by updating DOM elements

Can anyone help me figure out how to update a webpage so it functions as a report that multiple people can contribute to? I'm using forms to collect data and want it to instantly display under the correct category headings. Currently, I'm using j ...

javascriptjqueryhtml

What are some creative methods to apply CSS styling to material-table in React?

I've spent several days searching for a solution without any luck. My project involves using material-table in React, and I am struggling to apply CSS styles to the headers (columns) and content (such as changing font size, adjusting width, and creati ...

cssreactjsmaterial-uimaterial-table

Adjust the size of every card in a row when one card is resized

At the top of the page, I have four cards that are visible. Each card's height adjusts based on its content and will resize when the window size is changed. My goal is to ensure that all cards in the same row have equal heights. To see a demo, visit: ...

javascriptjquerycssangular

Save this text in HTML format to the clipboard without including any styling

When using this code to copy a htmlLink to the clipboard: htmlLink = "<a href='#'>link</a>"; var copyDiv = document.createElement('div'); copyDiv.contentEditable = true; document.body.appendChild(copyDiv); ...

javascripthtmljquerycssclipboard

Issue with Bootstrap contact form functionality in PHP not working

I have experience in coding HTML and PHP, but unfortunately, [email protected] (mail address) is still unable to receive emails from my website (http://cloudsblack.info/) and when I click the submit button, it leads to a blank page (http://cloudsblack.info ...

phphtmltwitter-bootstrapcontact-form

Mastering the Art of Effortless Content Manipulation with Jquery's

Click here to access the example JSFiddle. I experimented with drag and drop functionality by successfully dragging the word "hello" into a specific div tag. Now, I am wondering how to extend this capability to multiple div tags. How can we achieve dropp ...

jqueryhtmlcss

Invisible boundary line within the column

My task involves creating a table using div elements. The layout of the table includes two columns structured as follows: <div> <div class = "columnborder"><span>Some text for column 1</span></div> <div><span>Some ...

htmlcss

Stopping a function that is currently running on a website using Javascript

I have a script on my website that triggers a rain feature when a user clicks on a button. However, I am struggling to figure out how to allow the user to deactivate this feature. I've tried various methods such as using break, return, and timeouts, b ...

javascriptphphtml

Display an AJAX div when the image is hovered over and have it track the movement of

I am seeking assistance with my website project, which involves providing users with download links to movies. However, I am struggling to make the preview_block div(id) appear when the mouse hovers over the movie_block div(id). Additionally, I am having ...

javascriptjqueryhtmlcssajax

JavaScript and modifying the attributes of the nth child

I'm working on a navigation bar that changes the "background-image" of menu items using the nth-of-type CSS selector. Now, I need to figure out how to dynamically change the picture of the "background-image" when hovering over a specific menu item usi ...

javascripthtmlcss

Tips for organizing list items in a grid format using CSS and HTML

In my div block, the width is not fixed. Inside the div, there is a list block with 11 items that I want to display evenly like this: ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## I&a ...

htmlcss

Overflow issues with flexbox design on mobile devices

Hello, I'm currently working on creating a sliding panel of images. While I have successfully implemented it, I am encountering some browser compatibility issues. The sliding panel functions perfectly on Chrome desktop, however, when viewed on mobil ...

htmlcssgoogle-chromemobilesafari

Site Having Trouble Displaying Image

I'm currently working on a Bridgetown website using Bootstrap 5, and I've encountered an issue with adding an image that won't show up on the site. This is what it currently looks like: https://i.sstatic.net/IUR7x.jpg Code <nav class=&quo ...

htmlcssrubyfrontendbootstrap-5

The tabbing feature in bxslider disrupts the alignment of slides, making it

After encountering accessibility issues, I upgraded the bxslider library to version 4.2.3 for better support. Check out this example of bxslider where you can easily tab through the controls: http://jsfiddle.net/qax7w8vt/2/embedded/result/ The problem a ...

javascriptjqueryhtmlbxslider

What is the best way to retrieve multiple image file names using JavaScript?

I attempted to use the code snippet below to retrieve the names of all the images I selected, however when I used 'alert', I only received one name even though I selected multiple. My goal is to have all the names of the selected photos saved in ...

javascripthtml

Aligning text and lists using Bootstrap on both desktop and mobile devices

I want to format a text with a list similar to the images provided https://i.stack.imgur.com/6giDH.png for desktop and tablet view, but for mobile display I would like it to look like this https://i.stack.imgur.com/7zSXi.png This is my current approach ...

htmlcsstwitter-bootstrap-3

Combining strings within angular brackets within HTML tags

Is there a way to concatenate strings within jinja brackets {{ }} in HTML? For example: <img src="{{ image.file.name }}"> I want to combine it with the image.file.name. For instance: <img src="{{ 'https://s3.ap-south-1.amazonaws.com/bucket ...

pythonhtmlstringjinja2string-concatenation

Looking for a jQuery plugin that helps with form alignment?

In a blog post comment, I came across an interesting jQuery form alignment plugin: jQuery.fn.autoWidth = function(options) { var settings = { limitWidth : false } if(options) { jQuery.extend(settings, options); }; ...

jquerycssforms

Creating HTML code using PHP to display two tables next to each other

My goal is to display two tables side by side in an HTML table, each ordered by a different column. I attempted this using the following code: <tbody> <td> <?php require_once "db_data.php"; $bids_results = $mysqli-& ...

phphtmlcss