Minimize the gap between two rows in an HTML table

Question

Minimize the gap between two rows in an HTML table

I am working with a table that has multiple rows, specifically five. My goal is to decrease the space between the third and fourth rows.

Here is the code snippet:

<table>
    <tr>
        <td>First Row</td>
        <td>1</td>
    </tr>
    <tr>
        <td>Second Row</td>
        <td>2</td>
    </tr>
    <tr>
        <td>Third Row</td>
        <td>3</td>
    </tr>
    <tr>
        <td>Fourth Row</td>
        <td>4</td>
    </tr>

The output currently looks like this:

First 1

Second 2

Third 3

Fourth 4

I would like to eliminate the gap between the third and fourth rows as shown below:

First 1

Second 2

Third 3
Fourth 4

Is there a way to set the padding between the third and fourth row to 0 only? This would help reduce the gap between those specific rows.

html css html-table

Answer 1

Answer №1

One thing to keep in mind is that the space can actually be reduced by collapsing the borders of the table:

table {
    border-collapse: collapse;
}

You might want to consider a technique similar to what Jukka K. Korpela advises, where you set padding on all elements except for the last child tr by using a combination of the :not()/:last-child pseudo classes.

VIEW EXAMPLE HERE

tr:not(:last-child) td {
    padding-top: 1em;
}

The example above is specific to your current situation, but it might not target the last element. In such cases, you could employ the :nth-child() pseudo class to focus on the desired element.

SEE EXAMPLE HERE

tr td {
    padding-top: 1em;
}
tr:nth-child(4) td {
    padding-top: 0;
}

This method demonstrates its effectiveness when dealing with multiple elements:

Answer 2

One thing to keep in mind is that the space can actually be reduced by collapsing the borders of the table:

table {
    border-collapse: collapse;
}

You might want to consider a technique similar to what Jukka K. Korpela advises, where you set padding on all elements except for the last child tr by using a combination of the :not()/:last-child pseudo classes.

VIEW EXAMPLE HERE

tr:not(:last-child) td {
    padding-top: 1em;
}

The example above is specific to your current situation, but it might not target the last element. In such cases, you could employ the :nth-child() pseudo class to focus on the desired element.

SEE EXAMPLE HERE

tr td {
    padding-top: 1em;
}
tr:nth-child(4) td {
    padding-top: 0;
}

This method demonstrates its effectiveness when dealing with multiple elements:

Answer 3

Answer №2

When creating a table in HTML without any special settings, there will be a small gap between the rows by default. However, if you want to eliminate this gap completely, you can achieve it by using the following code:

<table cellpadding=0 cellspacing=0>

After that, you can set the padding as per your requirement using CSS on individual cells. For example:

tr:not(:last-child) td { padding-top: 4px }

Answer 4

When creating a table in HTML without any special settings, there will be a small gap between the rows by default. However, if you want to eliminate this gap completely, you can achieve it by using the following code:

<table cellpadding=0 cellspacing=0>

After that, you can set the padding as per your requirement using CSS on individual cells. For example:

tr:not(:last-child) td { padding-top: 4px }

Minimize the gap between two rows in an HTML table

Answer №1

Answer №2

Similar questions

Sending jQuery events from an aspx page to an ascx control

A straightforward development and production build to incorporate HTTPS for a static website created with React and Express

I am puzzled as to why my text and div boxes are displaying in my navbar/hamburger menu instead of at the bottom of the page

What could be the reason for the navigation bar menu items not showing up in the sample application of the twitter.bootstrap.mvc4 package?

How can I create a unique visual effect on the background in frontend development using chipped design techniques?

Assign the value/text of a div element by using JavaScript/jQuery within a PHP loop

Issue with window.localStorage.setItem not functioning properly on mobile devices

I'm encountering an undefined JavaScript variable, how should I proceed?

Failure to highlight items when using the multiple select function

section containing image on the left side and title and text on the right side

Exploring the positioning, placement, and orientation of Bootstrap popovers

when a div contains another div and is then followed by another div, apply the following style

Attempting to repair navigation menu on grou.ps website

Tips for placing a large image within a small div

Personalized Bootstrap grid rows and columns

The CSS3 box-shadow lacks a sense of dimension

The foundation grid system is experiencing difficulties when implemented on an Angular form

What is the best way to increase the size of a specific text style?

When editing html files in Vim, the javascript indent filetype plugin is sourced unexpectedly

If other options fail, Else If may not be a suitable choice