Expand the space between each pair of rows within a table

After implementing the code below:

HTML

<table>
    <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
    </tr>
    <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
    </tr>
    <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
    </tr>
</table>

CSS

table {
    border-collapse: separate;
    border-spacing: 0 1rem;
    width: 100%;
}

The resulting output looked like this:

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

However, I actually wanted my output to resemble this:

https://i.sstatic.net/7R38h.png

I attempted adding margin to table rows but saw no difference.

Thank you! :)

htmlcssangular

Answer №1

To achieve a gap in table rows, you can utilize the :nth-child() pseudo-class with a value of 2n+1 every 2 elements:

:nth-child(2n+1)

Setting the gap in a table can only be done using the border-spacing property within the table tag; using margin and display: block for this purpose is not recommended.

To add space between rows, apply the rule border-top with the color set to currentColor.

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

table tr {
    background-color: blueviolet;
    color: white;
}

table tbody tr:nth-child(2n + 1) {
    border-top: 25px solid currentColor;
}
<table>
    <thead>
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
        </tr>
        <tr>
            <td>Ernst Handel</td>
            <td>Roland Mendel</td>
            <td>Austria</td>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
        </tr>
        <tr>
            <td>Ernst Handel</td>
            <td>Roland Mendel</td>
            <td>Austria</td>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
        </tr>
        <tr>
            <td>Ernst Handel</td>
            <td>Roland Mendel</td>
            <td>Austria</td>
        </tr>
        <tr>
            <td>Ernst Handel</td>
            <td>Roland Mendel</td>
            <td>Austria</td>
        </tr>
    </tbody>
</table>

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

Utilize jQuery to display a list of defined CSS classes based on a regular expression, implementing a targeted CSS strategy to prevent any

I have defined a set of CSS classes in app.css: .eventcolor-1{background:rgba(249, 115, 0);} .eventcolor-2{background:rgba(14, 48, 71, 0.99);} .eventcolor-3{background:rgba(16, 130, 140, 0.99);} .eventcolor-4{background:rgba(41, 91, 167, 0.99);} .eventcolo ...

javascriptcss

The resource was treated as an image but sent with the MIME type application/octet-stream

Upon accessing my webpage, a warning message is displayed: Resource interpreted as Image but transferred with MIME type application/octet-stream The images on my page are in JPEG format. The server writes the image bytes to an output stream and sends it ...

javascripthtmlcssbrowsermime-types

Javascript updating text according to input in textbox functions properly initially, but the changes disappear afterward

This solution functions correctly for a brief moment before disappearing. function checkTFW() { var TFW = document.getElementById("TFW").value if (TFW == "mexicans") { document.getElementById("image").innerHTML = "<h1>Success!</h1>"; ...

javascripthtml

Mastering Angular Dynamic Forms with the Power of Angular Material

I successfully created a dynamic form component using Angular 5 with reference to the documentation and examples provided on https://angular.io/guide/dynamic-form. However, my implementation encounters an issue when I attempt to incorporate Angular Materi ...

angularangular-materialdynamic-forms

How can I create a drop-down list in Bootstrap 4 input?

Displayed below is an example of a customized button dropdown featuring material icons and the Google Roboto Mono font, ideal for optimal spacing. My inquiry pertains to replicating this behavior with an input field. <!-- Bootstrap CSS --> < ...

htmlcssbootstrap-4

I'm looking to adjust the position of an image inside a div without affecting the position of the entire div

When creating a horizontal navigation bar with an image, I encountered an issue where the image link did not align with the rest of the links on the navigation bar. I wanted to drop it down by a pixel or two without affecting the position of the other link ...

csshtml

What is the importance of including the source name when redirecting?

In a recent discussion (jQuery Ajax PHP redirecting to another page), it was mentioned that when utilizing ajax for redirection to a PHP page, an event needs to be set in the following manner: $.ajax({ type: "POST", url: "ajax.php", data: dataString, ...

phpjqueryhtmlajaxhttp-redirect

Using both italic and regular text in an HTML (or ASP.NET) textbox can add emphasis and enhance readability for

Is there a way to achieve this using JavaScript? For instance, if the initial text is 'Axxxxxx', I want it to be displayed in a textbox with normal style for the first letter and italic style for the rest like 'A*xxxxxx*' If the initia ...

javascriptasp.nethtmlcss

Reverse the color of H1 text within a vertical div

Is it feasible to reverse the coloring of a segment within an h1 element using a div, horizontally? Refer to the illustration shown in the image below. https://i.sstatic.net/QAKwD.jpg ...

javascripthtmlcss

Adjust the width of a float-right container to its maximum width

Looking for a solution similar to the one discussed in this question: CSS - Float to max width In my project, I am working on a layout that involves a <pic> / <info> style setup, with a twist - I want it to be responsive when the user resizes ...

htmlcsscss-floatwidth

Switching up the default font style within TinyMCE

After successfully changing the default font within the editor using the guidelines provided here, I have encountered a new issue. The original default font no longer appears in the font drop-down list. The previous default font was Verdana, and the new d ...

javascriptcssfontstinymcefont-face

Encountering an unforeseen issue with my code

I am currently developing a web application in advanced Java and incorporating various external libraries such as choosen.js, summernote.js, Bootstrap, BootstrapValidator, etc. I have encountered some errors and am struggling to pinpoint the root cause of ...

jqueryhtmlcsstwitter-bootstrap-3summernote

Steps to transfer an array from an HTML page to Node.js and subsequently save it in a database

Looking for guidance on how to transfer a JavaScript array using Node.js to MySql. Seeking helpful videos or explanations to clarify the process. Thank you! ...

javascripthtmlmysqlnode.jsmysql-workbench

Significant bloat in main.js file detected in Angular 2 application compilation

I developed an application using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="65040b02100904174806090c25554b554b565c">[email protected]</a>. The app is a transformation of a basic Angular 1 application. My conc ...

angularangular-cli

How can I troubleshoot the issue with the Angular 6 @input() set() function not functioning properly?

After creating a component that dynamically renders buttons based on a JSON file with inputs such as disable, color, and size, I am now dealing with receiving input in the app-dynamic-form-buttons component: @Input('butnDisabled') set butnDis ...

angularinputangular6

Ways to verify HTML code consistency for mobile phone web applications on various devices

I am in the process of developing a mobile-friendly HTML/JavaScript web page that needs to be functional on older mobile devices as well. This webpage will consist of select lists, buttons, links, and basic JavaScript for some variables. Is it feasible ...

javascriptjqueryhtml

Even after attempting to conceal objects using display:hidden, there is still whitespace present on the webpage

Check out my code in action on JsFiddle by visiting the following link: https://jsfiddle.net/2yvjm4h1/ Even after using display:none; to hide my objects rather than visibility:hidden before showing them with JavaScript, I still notice a significant amount ...

javascripthtmlcssdombootstrap-4

wrap text image not compatible with responsive layout

Plunker Link: https://plnkr.co/edit/kC9SPK2e7iy5OYhKpwOO?p=preview <html> <head> <link data-require="bootstrap@*" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> ...

htmlcssbootstrap-4

Numerous unresolved peer dependency issues have been detected, such as a missing @angular/[email protected]

I've been encountering issues with package dependencies lately, specifically related to angular2-busy. However, upon further investigation, it seems like there may be a larger underlying problem. Whenever I execute "npm list", I am bombarded with UNM ...

angularnpm

Retrieve user roles from OpenID Connect client

Utilizing oidc-client for authentication in my application with Angular and ASP.NET Core 3.1. Is there a way to retrieve the user roles from ASP.NET using oidc client? ...

c#angularasp.net-coreidentityserver4oidc-client