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

Unable to conceal adjacent radio buttons

My challenge is to use only HTML and CSS, without JavaScript, to show the first radio button with its label initially. When a user clicks on it, the second radio button and label should appear while the first disappears, and so on. I am struggling to ach ...

htmlcss

What are some methods for creating a Venn Diagram that includes data within each section using SVG, CSS, or Canvas?

I am attempting to replicate this visual representation using pure SVG, CSS, or Canvas drawing. So far, I have successfully created three circles that overlap and placed a label in the center of each one. However, I'm facing challenges when it comes t ...

javascripthtmlcsssvgcanvas

Implementing Material UI datetime-local feature with no minute selection

Is there a way to hide minutes in a TextField with type = datetime-local? <TextField label="From" type="datetime-local" InputLabelProps={{ shrink: true, }} /> This is how it appears on my end: screenshot ...

javascripthtmlreactjsmaterial-ui

How come Vue.js is not showing the image I uploaded?

Even though I can successfully print the image URL, I'm facing an issue where the img tag is not displaying it, despite my belief that I've bound it correctly. <html> <head> <title>VueJS Split Demo</title> <script t ...

javascripthtmlvue.js

Assign a new class to the anchor tag that has a distinct ID named "link"

I want to add the CSS class "active" to the anchor tag that contains the ID currently active in the URL. Here's what I've tried, but I'm unable to get window.location.hash to function properly. $( "a[href=' + window.location.hash + &ap ...

jquerycssclassaddition

Manipulating toggle buttons using CSS and jQuery

Check out this jsfiddle to see my attempt at creating a toggle switch in the form of a mute button. The toggle button shows the current setting: mute or unmute When hovered over, it displays the alternative setting However, I am encountering an issue wh ...

javascriptjquerycsshover

Only displaying sub items upon clicking the parent item in VueJS

I'm in the process of designing a navigation sidebar with main items and corresponding sub-items. I want the sub-item to be visible only when its parent item is clicked, and when a sub-item is clicked, I aim for it to stand out with a different color. ...

javascripthtmlcssvue.jsvuejs2

Is it possible to incorporate an element using absolute positioning using jQuery or Javascript?

When trying to add a new element on the screen, I am facing an issue with the absolute positioning not working properly. Sample Code in Javascript function drawElement(e,name){ $("#canvas").append("<div id='" + name + "' class='e ...

javascriptcsscss-position

Can someone please clarify how the nth-of-type selector functions?

I can't understand why the nth-of-type selector needs to be set to 2 instead of 1 for the first sibling of this type in the code. To see the code in action, check out this jsfiddle: https://jsfiddle.net/xj5hvn16/ If anyone could kindly provide an ex ...

htmlcsscss-selectors

Can someone guide me on developing a similar design utilizing HTML canvas with HTML 5 technology?

Hey everyone, I could really use some assistance on creating a design with Html 5 canvas. My current issue is that the rectangles I'm trying to generate are overlapping and not fitting properly within the canvas. Below, you'll find both a referen ...

htmlcssreactjs

Building a set of multiple choice questions with the flexibility to include two or more options using bootstrap

If you visit https://getbootstrap.com/docs/4.0/components/forms/, you can find code that allows you to create a multiple-choice question with only one choice allowed using the following snippet: <div class="form-check"> <input clas ...

htmlbootstrap-4survey

Sending a concealed input according to the chosen option

I'm attempting to send some hidden values to a Servlet via a form, but my goal is to only pass them if the user chooses a specific option. <!-- FORM ABOVE --> <input type="hidden" name="foo" id="foo" value="foo"> <input type="hidden ...

javascripthtmlformsservletshidden-field

Attempting to upload a file into the system

I'm in the process of creating a website that allows for file uploading. Check out my code below: index.php: <?php include('/inc/header.php'); ?> <?php if($_SESSION['username'] != null) { echo " <form class=&bs ...

phphtml

Tips for converting PSD template into HTML/CSS code

Currently, I am in the process of converting a PSD template into HTML/CSS. The file contains around 50 layers that have been exported to PNG using a Photoshop script. To begin, I structured the code like this: <div id="container_1"> <div id="co ...

htmlcsstemplatespsd

Triggering a targeted action upon the user's click on any HTML element

Currently, I am in the process of developing navigation buttons that trigger a dropdown sub-menu when clicked by utilizing checkbox inputs. Upon clicking the label, the input is checked, causing the menu to drop down, and when the label is clicked again, t ...

htmlcss

Fixing issues in PHP File Editor

At our web development company, we have created an online file editor and file manager script for our website users to easily manage their files and customize their templates. This script is written in PHP and allows users to edit html, text, php, js, jque ...

phphtml

How can I import the raw JSON data from a table into a pandas DataFrame?

I am attempting to extract the JSON data and convert it into a dataframe from: "" , which is the original data displayed in a table at the bottom of this page "" The content on the JSON page seems to be basic JSON data like"[{\"SECURITYCODE\":& ...

pythonhtmljsonpandasdataframe

Creating a carousel with a curved dial or wheel: A step-by-step guide

My goal is to create a carousel with curved container and downward movement for items not in focus. The description should change based on the focused item, and I prefer the carousel not to autoplay. via GIPHY I've been searching online for a soluti ...

jquerycsscarouselcurveowl-carousel-2

Eliminating undesired borders of table cells using CSS

I am facing a unique and puzzling issue. Here is the simple markup: <table> <thead> <tr><th>1</th><th>2</th><th>3</th></tr> </thead> <tbody> <tr>< ...

htmlcsshtml-table

Tips on aligning HTML divs properly while printing with jQuery using flexbox CSS

Need help with aligning div content for print media query. Created a media query to target both screen and print. Print media query is similar to the screen media query. Display is fine on the screen, but misalignment occurs when trying to print. Fiddl ...

jquerycssflexbox