How can I create space in between each column underline using css?

I'm struggling to add space between the columns of my table, similar to having a gap between each underline. I've looked at some posts on this website, but haven't been able to solve it.

Here's the code I've attempted:

.rbcrosstab #CR > tbody > tr > td:nth-child(1) {
    border-bottom: 4px solid #005691 !important;
    height: 10px;
    padding-top: 5px;
} 
.rbcrosstab #CR > tbody > tr > td:nth-child(2) {
    border-bottom: 4px solid #24A3CC !important;
    height: 10px;
    padding-top: 5px;
} 
.rbcrosstab #CR > tbody > tr > td:nth-child(3) {
    border-bottom: 4px solid #88BB6C !important;
    height: 10px;
    padding-top: 5px;
}

https://i.sstatic.net/WuCh1.png

css

Answer №1

Utilizing a pseudo element :after to generate a separate element, which can be challenging when using border-bottom. By employing calc() to determine the width, this task becomes achievable. I hope this information is valuable to you and wish you the best of luck!

<html>
    <head>
        <style>
            thead td:after {
                background: red;
                content: '';
                width: calc(100% - 5px);
                height: 3px;
                display: block;
            }
        </style>
    </head>
    <body> 
        <table>
            <thead>
                <tr>
                    <td>Volcano Name</td>
                    <td>Location</td>
                    <td>Last Major Eruption</td>
                    <td>Type of Eruption</td>
                </tr>
            </thead>
            <tr>
                <td>Mt. Lassen</td>
                <td>California</td>
                <td>1914-17</td>
                <td>Explosive Eruption</td>
            </tr>
            <tr>
                <td>Mt. Hood</td>
                <td>Oregon</td>
                <td>1790s</td>
                <td>Pyroclastic flows and Mudflows</td>
            </tr>
            <tr>
                <td>Mt .St. Helens</td>
                <td>Washington</td>
                <td>1980</td>
                <td>Explosive Eruption</td>
            </tr>
        </table>    
    </body>
</html>

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

Is there a way to adjust the background hues of a React component when a click event is triggered?

Currently, I have 3 React components that each consist of a div element. When I click on one component, I want to change its background color to black. If I then select another component, the previously selected component should return to its normal back ...

cssreactjs

React app (storybook) experiencing loading issues with @font-face

I am struggling to load custom fonts from a local directory. Can someone provide assistance? Below is the code I am currently using: @font-face { font-family: 'My Custom Font'; src: url('./fonts/MyCustomFont.eot'); src: url(&apo ...

javascriptcssreactjsfontsstorybook

Designing an HTML and CSS footer navigation bar

Can you help me create a footer menu using HTML and CSS? Check out this image for reference Any tips on how to style it with cascading style sheets? <footer> <ul> <li><a href="">Home</a> </li> <li> ...

htmlcssmenu

Is the z-index feature not functioning as anticipated?

I'm currently working on a project involving a book that flips on click on both sides. The process involves checking the direction when a page is clicked and flipping it to the left if it's not to the right. Additionally, I adjust the z-index to ...

javascripthtmlcss

The 100% CSS styling in Android WebView 4.4 is failing to display any content

When utilizing an Android webview to load a basic HTML page, I encountered an issue where the content div with 100% width and height was not visible on a Galaxy Nexus 4.4.2 device. This problem did not occur when viewed in a browser. Below are the setting ...

androidcsswebviewandroid-4.4-kitkat

How to place text on top of a thumbnail in Bootstrap using HTML

I've come across similar questions here, but none of the suggested solutions have worked for me. (I attempted making the image a background as recommended on how to display text over an image in Bootstrap 3.1, but it didn't seem to be effective) ...

htmlcssimagetwitter-bootstrap

In my opinion, CSS3 transform translateZ can be likened to scaling in some way

There are instances where I believe that the translateZ and scale properties produce similar effects, akin to zooming in or out. I suspect there is a mathematical relationship between them. If I know the value of one, such as translateZ(-1000px), along wi ...

htmlcsstransformscale

Adjust the position of an anchor tag when clicked with a fixed header

I found a similar question on stackoverflow and was able to derive my solution from there. However, I am facing a slight issue with it. In my case, I have a small fixed submenu at the top of the page. When I click on an anchor link, I want the scroll posi ...

javascriptjquerycsshtml

What is the best way to arrange 4 resizable divs in a horizontal layout?

I need to create a search feature with a specific layout: [Search Input (visible when search icon is clicked)] SearchIcon ClearIcon RefreshIcon All arranged in a horizontal layout. I have created a directive (called my-search) to combine the search inpu ...

htmlcssangularjsangularjs-directive

preventing CSS hover effects

One of the CSS classes I have defined is for a button, which looks like this: .MyButton{ color:black; background:white;} .MyButton:hover{ color:white; background:black;} This class is used for pagination buttons. When a button reaches its bounds, I ...

jquerycss

Explore the world of threejs with a sphere adorned with cube bumps

Currently, I am navigating through the internet in search of a solution for my problem. The example I came across is quite impressive, take a look: . My dilemma lies in converting these squares into CSS cubes while ensuring that they do not get cut off by ...

javascriptcssthree.js

Using Angular's ng-style directive to apply various styles based on multiple conditions and attributes

I am attempting to apply multiple styles to an accordion group using the ng-style directive since ng-class is not compatible with accordions. Here is my current implementation: ng-style="{ border: ivrMessageForm.ivr_messagetitle.$error.required && ...

htmlcssangularjs

A new version of Primefaces has been released, introducing a sleek button feature with

How can I utilize the Primefaces version 10 button with a Font Awesome icon, resizing the icon without displaying the words ui:button? A and B are tests that I can resize successfully, but they are not buttons. C and D are buttons where the icon is resize ...

cssprimefaces

Is there an issue with the JavaScript functionality of the max/min button?

Help needed with maximize/minimize button functionality as my JavaScript code is not working. Any suggestions for a solution would be greatly appreciated. Thank you in advance. Below is the code snippet: <html> <head> <script> $(functio ...

javascriptphpjqueryhtmlcss

Place a small image within a list item to ensure it matches the height of the list element

I need help aligning images to the right within list elements. The images are squares with equal height and width, and I want them to fit snugly within the height of the list element on the right side. My HTML code is quite simple for now (see example bel ...

htmlcss

My jQuery plugin crashes when I delete the line with '.css({display: 'none'})'

Currently, I am utilizing a jquery plugin that replaces the file input of a form with a div. This allows for the file browser to pop up when the div is clicked. Upon selecting a file, the form is automatically submitted and the results are loaded into a hi ...

javascriptjquerycss

Match the text within a span with the .btn class

I am currently dealing with the .card displayed below and struggling to get the text "You liked this." to align correctly with the Like and Comment .btn-links under the hr element. <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bo ...

cssbootstrap-4

Steps to modify the display value of the Wordpress Elementor dropdown ul from block to grid

I have the Astra theme installed along with the Elementor plugin. Can anyone guide me on how to change the CSS value of the dropdown ul item display from "block" to "grid"? I have tried adding custom CSS code but it's not taking effect. .elementor-na ...

jquerycsswordpresselementor

Utilizing media queries to customize the appearance of a jQuery accordion widget

Hello, I'm struggling with implementing a jQuery accordion for mobile platforms that destroys itself on larger screens. While my code is mostly working, I've encountered two issues: The accordion only gets destroyed when the window is resized ...

javascriptjqueryhtmlcssjquery-ui

Struggling with smoothly transitioning an image into view using CSS and JavaScript

I'm currently experimenting with creating a cool effect on my website where an image fades in and moves up as the user scrolls it into view. I've included the code I have so far below, but unfortunately, I keep getting a 404 error when trying to ...

javascripthtmlcssgetboundingclientrect