CSS inset box-shadow creates a gap between collapsed borders

I need help with a strange issue I'm facing. I have a table where border-collapse is set to collapse, and there's an unusual gap between the box-shadow inset and the border. The size of this gap increases as the border width gets larger. How can I fix this issue? This problem occurs specifically on Chrome.

HTML:

<table class="theTable">
  <tr>
    <td class="weirdGap">
      unexpected space
      <br>
      unexpected space
    </td>
  </tr>
</table>

CSS:

.theTable {
  border-collapse: collapse;

}

.weirdGap {
  box-shadow: inset 0 0 6px red;
  border: 5px solid blue;
}

View the jsFiddle example here

htmlcss

Answer №1

When using the border-collapse property, you have the option to either collapse all of the table borders into a single border or leave them detached as in standard HTML format. For more information and examples on how to utilize this property, visit developer.mozilla.org/.../border-collapse.

Answer №2

The issue at hand persists, but here's a workaround that could be effective depending on your requirements: Instead of utilizing border-collapse: collapse;, consider creating all the table borders using box-shadow:

box-shadow:
    inset 1px 0 black,
    inset 0 1px black,
    1px 0 0 0 black,
    0 1px 0 0 black,
    1px 1px 0 0 black;

By doing this, you'll notice that the borders on the right and bottom will extend beyond the cell's boundaries while those on the top and left will remain contained within the box. When combined with cell-spacing: 0, adjacent box borders will overlap, producing a similar outcome to using border-collapse: collapse. For achieving specific visual effects, you can incorporate additional box shadows as needed, but remember to include all existing shadows to retain desired styles (In case different rules apply box-shadow properties to the same cell, they won't merge automatically and you must manually combine them).

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

The navigation bar vanishes when a picture is inserted below it

I encountered an unusual issue on my webpage. Everything was going smoothly with my navigation bar, even for mobile phones. However, as soon as I added a photo below the navigation bar, it disappeared... I'd like to keep the navigation bar visible, ...

htmlcssbackground-imagenavigationbarjquery-mobile-navbar

The hamburger menu icon is not visible

I recently built a website and aimed to ensure it had a responsive design. Following a tutorial on YouTube, I implemented everything exactly as shown in the video. However, I encountered an issue with the hamburger icon not appearing. Can anyone shed som ...

htmlcssresponsive-designhamburger-menu

Leverage the model attribute in a Spring controller to conditionally display elements using

I am currently working with spring boot, angularjs and using html as the view. This setup is being implemented in index.html. <a ng-show="permission=='write'"> By returning the 'permission' value in the model from the spring boo ...

htmlangularjsspring

Make the text area occupy the full width of the remaining screen space

I've been struggling to make the text area fill the remaining width of the screen. Everything is set up nicely, but I just can't seem to find a solution to get it to expand and occupy the rest of the available space. I intentionally refrained fr ...

htmlcssformstextareaflexbox

Error message: "Angular.js encountered a typeError stating that V2.example is not a function"

Having recently started learning Angular.js, I came across a tutorial that was created about a year ago. In this tutorial, I am attempting to implement a search feature that takes user input and searches for it on Github.com. Below is the HTML code snippet ...

htmlangularjs

Using jQuery and Ajax to fade in content after all images and other assets have finished loading

I've encountered an issue with loading pages via ajax for users with custom URLs. For example, a profile is usually found at http://example.com/users/Dan, but if a user has a custom URL like http://example.com/DansCustomURL, I need to fetch their desi ...

javascriptjqueryhtmlajax

Allow only specific inner divs to dictate the width of the outer div

I'm working with the following HTML structure: <div id="container"> <div id="block1"> <img src="someimage/path" /> </div> <div id="block2"> Some Text </div> <div id="block3"&g ...

htmlcss

Issue with background/hero video not adjusting its size

I've been experimenting with creating a page that features a video as the background, but no matter what I try, the video never seems to resize properly. The image below shows how it looks: image in question body { margin: 0; } .hero-se ...

htmlcss

The video is not displaying on my website

I recently added a video to my webpage that is 3:48 minutes long. However, even though I have the navigation bar and sound in place, the video does not seem to be displaying properly. Here is an image of how it appears: https://i.stack.imgur.com/HeN41.png ...

htmlcssvideo

Place two anchors side by side using inline-blocks without using the float property

Is there a way to align two buttons next to each other without using floating? I have encountered an issue where adding a width to one of the buttons causes it to jump down and be on a different line than the other button. The buttons are centered, so th ...

htmlcss

Having trouble displaying images in Express JS

Here are the lines of code that I wrote in Express: res.write("The current temperature is "+temp+". "); res.write("Weather is currently "+weatherDes); res.write("<img src=" +imageURL+ ">"); res.send() ...

javascripthtmlnode.jsexpress

I would like to include the value of the "file_id" variable in the href attribute of an appended HTML element, but it seems

<div id="invite_popup"> </div> $(".invite_button2").click(function(){ var file_id = $(this).data("id"); //alert(file_id); var popup2 ='< ...

javascriptphphtmlajaxlaravel

Issue with Laravel project: Views are not updating after code changes

Despite my efforts to clear and refresh everything, my Laravel project is not reflecting the changes. I have attempted clearing the view and deleting files manually. I also ran cache:clear, changed the root folder name, but the project continues to displa ...

phphtmllaravel

"Interact with jQuery by sliding side to side or in a circular motion

I am in need of assistance with sliding images using jQuery back and forth, or making them go round in a loop. Currently, the images slide up to the last element and then swiftly return to the first div, which is not visually appealing at all. I understa ...

javascriptjqueryhtmlcss

Something seems to be preventing Div from appearing and there are no error messages appearing

I've been attempting to create a menu, but the toggle div for the menu isn't visible Following a tutorial where an individual sets up a menu, there is a div with a menu icon in the top left corner. Despite meticulously copying the code from the ...

javascriptcss

Discovering the current page using ons-navigator in Onsen UI

I am currently attempting to determine the page I am on while using the popPage() function with Onsen UI's ons-navigator. I have tried the following methods, but they always return false regardless: this.navigator.nativeElement.popPage().then((page: a ...

htmlangulartypescriptnavigationonsen-ui

Center-align the text in mui's textfield

What I'm looking for is this: https://i.stack.imgur.com/ny3cy.png Here's what I ended up with: https://i.stack.imgur.com/vh7Lw.png I attempted to apply the style to my input props, but unfortunately, it didn't work. Any suggestions? Than ...

javascriptcssmaterial-ui

Having trouble retrieving the toDataURL data from a dynamically loaded image source on the canvas

Currently, I am working on a project that involves a ul containing li elements with images sourced locally from the "/images" folder in the main directory. <section class="main"> <ul id="st-stack" class="st-stack-raw"> ...

javascriptjqueryhtmlcanvastodataurl

Connecting an HTML box to a JavaScript function for the desired outcome: How to do it?

My goal is to connect the input box with id="b" (located inside the div with id="but1") with a JavaScript function that calculates values within an array. Although my junior logic review didn't detect any issues in the code, what mistakes could I have ...

javascripthtml

What is the best way to rotate a cube when it is clicked on?

My current project involves rotating a cube by clicking on buttons either on the cube itself or floating next to it. At the moment, I have them floating for easier testing purposes, but placing them directly on the cube is not an issue. The main issue I&a ...

javascripthtmlcssrotationcube