Chrome experiencing issues with box-shadow on display:table-row-group

box-shadow doesn't seem to be functioning properly in Chrome for me.

In my table layout, I need to use the display property set as table-row-group. I've been attempting to apply a box-shadow to the tbody element but it's not producing the desired effect. You can view the issue here - JSFiddle.

Interestingly, it works perfectly in Firefox but not in Chrome. After researching other suggestions and questions, it appears that using display: block property may resolve this.

Is there any workaround for using display: table-row-group while still achieving the desired result?

google-chromecss

Answer №1

If you want to add a box-shadow to a th or tr tag, you can work around it by creating a div inside the tag and applying the box-shadow to the div instead. I've demonstrated this technique in this JSFiddle example with the first th element.

Answer №2

Give this a shot:

table {

  -webkit-box-shadow:  5px 5px 3px blue;
  -moz-box-shadow:  5px 5px 3px blue;
  box-shadow:  5px 5px 3px blue;
  display: block;
}

Success!

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

Successfully opened website using Selenium chromedriver, however unable to interact with its contents

My current challenge involves using Selenium and ChromeDriver to interact with the Lowes website (https://www.lowes.com/). I am able to load the home page successfully, but when I try to change the location by clicking on the specific button, the website g ...

python-3.xseleniumgoogle-chromeselenium-webdriverselenium-chromedriver

Tips for modifying the appearance of a text file within an iframe

Lately, I've been facing a dilemma on my website. I have an iframe code that looks like this: <iframe src ="http://hokuco.com/cde/user.txt" id ="myIframe"></iframe> However, the consolas font used in the iframe makes my website appear ...

htmlcssiframe

How to easily make a table in the center of the page using

I have a collection of 20 icons that I would like to arrange in a centered horizontal line of images. However, I am looking for a responsive solution and cannot use an HTML table. It needs to be mobile-friendly and wrap properly for small screens. If I wer ...

htmlcsstwitter-bootstrap

Transition smoothly between images using CSS in a continuous loop

Is it possible to create a looped fade effect between images using only CSS, without the use of JavaScript? I attempted to achieve this by utilizing keyframes but was unable to succeed. Any guidance or assistance would be greatly appreciated. Thank you! ...

cssfadekeyframe

What is the best way to link the roll button to a specific video URL?

I am currently working on a project that involves assigning specific videos to 6 roll buttons for continuous play. For instance, I want the first roll button to display a yellow dice and the second button to show a blue dice, and so on. As of now, I have ...

javascripthtmlcss

What is the best way to combine height and min-height in order to ensure that a div always extends to the bottom and keeps

I've tried multiple suggestions without success so far. In my website, I have a main section with white background centered on the page. It stretches nicely to the bottom using flex. See image: https://i.sstatic.net/RmJ2o.png However, there's a ...

htmlcssheight

What is the typical method for preserving a specific gap between two lines when the line spacing surpasses the margin?

My workplace provided me with a wireframe that looks like this: https://i.sstatic.net/Qumru.png Description of the image above: Maintain a margin of 10px between the lines and utilize the specified css class .font16. This is what the .font16 class conta ...

htmlcssmarginline-height

Adding / Deleting a Row in a sequence of floated divs

I have a group of div elements arranged side by side with the float:left style as shown below: <div id="container"> <div id=0" style="float:left">> Stuff </div> <div id=1" style="float:left">> Stuff </div> < ...

javascriptjqueryhtmlcssdom

What is the best way to use absolute positioning in React Native to align an element with its grandparent?

I am trying to position a Font Awesome icon in a React Native project using absolute positioning relative to the grandparent element, rather than its direct parent. After some research, I came across the following information on this page: https://reactna ...

cssreact-nativecss-positionabsolute

How to apply new CSS styles to override the existing ones for an element

I have a website with custom CSS styling applied to an <A> tag, including styles for A:hover. However, I need to remove these hover effects for one specific instance of the tag. Is there a way in CSS to set a property so that it does not change? Let ...

htmlcsshover

Automatically fading in a div with jQuery and fading out upon scrolling

I am relatively new to working with JQuery and currently attempting to implement a feature where a div at the bottom of the page fades in upon loading, and then fades out as the user starts to scroll down. The div should reappear when scrolling back to the ...

jquerycss

Creating a wide mega dropdown menu using Bootstrap 5.2 for a full-width page

I am attempting to create a Bootstrap 5.2 Mega Menu with a full page-wide background, but I am encountering some challenges. Here is my basic navigation setup: <nav class="navbar navbar-expand"> <div class="container-fluid" ...

htmlcsstwitter-bootstrapbootstrap-5

Is there a way to format a block of text so that right-to-left text aligns to the right, while left-to-right text aligns

I have a content block that includes text in both left-to-right and right-to-left languages, and I need to ensure that both display correctly. If the user begins with left-to-right text, it should be displayed from left to right with left alignment If the ...

htmlcss

Adjust the classes of the static navigation bar based on the background of the section it is positioned over

In the process of developing a website using Bootstrap 4, I encountered a challenge with sections featuring both light and dark backgrounds along with a fixed navbar. The navbar, which is set to dark using the css class bg-dark, becomes indistinguishable ...

javascriptjquerycssbootstrap-4scrollspy

Unable to show the company logo in the navigation bar

Working on a pizza site and encountering an issue - trying to add the logo of the place to the navbar (which also links to the main page) but it's not displaying. Using Twitter Bootstrap for this project. Here is the code snippet: /*#557c3e green*/ ...

htmlcsstwitter-bootstrap

AMP: Switch CSS Style

When creating an amp template, I included a button that toggles the visibility of an amp-sidebar. The code for the button is as follows: <button class="button .closed icon" on='tap:sidebar1.toggle'></button> The side-bar toggles suc ...

htmlcsstogglegoogle-amp

Ways to layer two divs on each other and ensure button functionality is maintained

In the process of developing a ReactJS project, I encountered the challenge of overlapping my search bar autocomplete data with the result div located directly below it. For a more detailed understanding, please take a look at the provided image. Here&apo ...

javascriptreactjscss

Concealing the Footer on Mobile Websites in Muse UI When the Keyboard Appears

In this project, I am using vue.js along with muse.ui and only incorporating JavaScript and CSS without the jQuery library. Currently, the footer position always ends up on top of the keyboard whenever an input field is focused. Is there a way to ensure th ...

javascripthtmlcssvue.js

Extracting Menu Information from Weedmaps

I've been attempting to extract menu data from dispensaries listed on weedmaps.com, but I'm struggling to understand how the website is structured and where the relevant information is located for scraping. My goal is simple: I want to retrieve ...

pythonjqueryhtmlcssweb-scraping

Issue with Bootstrap dropdown not appearing properly when switching between screen sizes

I am currently working on converting a side navigation in bootstrap to a dropdown when the window is resized. However, I am experiencing an issue between the medium and small screen sizes where for a few pixels, nothing is shown. The side navigation disapp ...

htmlcsstwitter-bootstrapresponsive-designnavigation