Utilizing the nth-child selector to apply border-spacing to all rows except the first and last

I've been attempting to add border-spacing to all rows except the first and last ones using nth-child, but for some reason, it's not having the desired effect. Can anyone point out what mistake I might be making?

table {
border: 1px solid black;
width: 98%;
margin: 0 auto;
border-collapse: separate;
border-spacing: 10px 50px;
}
td {
border: 1px solid black;
}
tr:nth-child(1) td:nth-child(1) {
border-spacing : 0px 0px; 
}
tr:nth-child(1) td:nth-child(2) {
border-spacing : 0px 0px; 
}
tr:nth-child(3) td:nth-child(1) {
border-spacing : 0px 0px; 
}
tr:nth-child(3) td:nth-child(2) {
border-spacing : 0px 0px; 
}
<table>
<tr><td> row1 col1 </td><td> row1 col2 </td></tr>
<tr><td> row2 col1 </td><td> row2 col2 </td></tr>
<tr><td> row3 col1 </td><td> row3 col2 </td></tr>
<tr><td> row4 col1 </td><td> row4 col2 </td></tr>
<tr><td> row5 col1 </td><td> row5 col2 </td></tr>
</table>

htmlcsscss-selectorshtml-tableborder-spacing

Answer №1

Make sure to review the code provided to see how you can implement the border-spacing effect on a table, rather than on individual td or tr elements. Remember that padding should be applied to td directly, and then you can use :first-child and :last-child to adjust the padding for the first and last td or tr elements.

table {
border: 1px solid black;
width: 98%;
margin: 0 auto;
border-collapse: separate;
border-spacing: 10px 50px;
}

td {
border: 1px solid black;
padding: 50px 10px;
}

tr:first-child td,tr:last-child td {
  padding: 5px; 
}
<table>
<tr><td> row1 col1 </td><td> row1 col2 </td></tr>
<tr><td> row2 col1 </td><td> row2 col2 </td></tr>
<tr><td> row3 col1 </td><td> row3 col2 </td></tr>
<tr><td> row4 col1 </td><td> row4 col2 </td></tr>
<tr><td> row5 col1 </td><td> row5 col2 </td></tr>
</table>

Answer №2

If I'm understanding your needs correctly, it seems like using `border-spacing` might not be the solution you're looking for. Instead, achieving the desired effect could be done with padding. You can use the following CSS to create variable spacing:

td {
  padding: 50px 10px;
}
tr:first-child td,
tr:last-child td {
  padding: 0; 
}

Since you specifically mentioned targeting the first and last rows, using `:first-child` and `:last-child` is more appropriate than `:nth-child`, which is better suited for more intricate selections such as patterns (e.g., every 3rd child).

It appears that the borders were possibly included for visual clarity. If necessary, you can wrap each `td` content in a `div` with padding and apply a 1px border to the `td div` (which targets any `div` within a `td`).

However, if the padding achieves the desired spacing, the rest can be easily adjusted.

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

Ways to optimize the spacing between the menu bar and widgets

I have successfully incorporated multiple images side by side on my blog Following is the code used for this layout: <div class="images"> <figure> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSA7XLfGrT1rMS-Ifoguz-X2igsT ...

htmlcsscss-floatblogger

Utilizing jQuery/Ajax to send an ID parameter to a PHP script

This code is where the user interacts. <html> <head> <title></title> <script src="jquery-1.9.1.js"></script> <script src="jquery.form.js"></script> </head> <body> <?php include 'con ...

javascriptphpjqueryhtmlajax

Locate the XPath for text that is within a div tag and adjacent to a span tag

I've searched, but couldn't find an exact match, so my question is about a low HTML code: <div class="column1"> <div> <div class="name"> Dynamic Name <span class="id" title="ID">Dynamic ID</span> </div> </d ...

htmlcssxpathselenium-webdriverdomxpath

jQuery mobile menu: Scroll to content after closing the menu

I am currently working on a project where I am using mmenu for the first time. It's functioning as expected, but there is one particular issue that I would really like to have resolved. Here is the URL: What I am hoping to achieve is that when a men ...

javascriptjqueryhtmlmmenu

Is there a way to ensure that the table headers are printed on every page when using Google Chrome

When printing documents in Chrome browser, the table header (thead) does not appear on every page. I want to ensure that the table header is displayed on each printed page, just like it is done with IE and Firefox. However, Chrome does not support this fea ...

javascriptjqueryhtmlcssgoogle-chrome

"Encountering an Ajax error 419 when using radio buttons and a form

I'm attempting to use AJAX to send radio button values to a Laravel route when a button is clicked, but I keep receiving error code 419 even though I am sending the CSRF token. $(document).ready(function(){ $("#valor").on('click' ...

htmlajaxlaravel

What is the method for assigning a link to a variable in JavaScript?

As I develop a website featuring an HTML course, I've opted for a consistent format for each lesson or page. One detail I've been working on involves setting a link within a button to a variable enclosed in quotes. For instance, I utilize the cod ...

javascripthtml

Tips for wrapping text within a span element that is positioned absolutely

Need a long string for the bullet text as shown in the code, they can't be separate words. Having trouble with overflow auto, it's cutting off the bullet text. The bullet text must remain in absolute position. How can I make the text wrap to t ...

htmlcss

Incorporate negative padding in order to smoothly scroll to a specific ID

When I jump to an ID using domain.com/#section, the scroll goes too far down and needs a negative margin added. Is there a way to achieve this directly in the URL without relying on CSS, jQuery, or JavaScript? ...

html

How to style the videojs chapter menu with CSS to extend the box to the full length of the line

I am currently working on customizing the videojs CSS for the ChapterButton menu in order to make it expand to accommodate varying line lengths without wrapping. Even though I can set it to a fixed width, I require it to be able to adjust to different line ...

cssvideo.js

What are the steps to include media queries?

My website looks good on big monitors, but not on smaller ones or on mobile phones. I need help with adding media queries to my CSS Reset so it works across all devices. Here's the website link and the CSS Reset code: html, body, div, span, applet, o ...

htmlcssmedia-queries

Comparison of single-line and multi-line CSS styles placement

There seems to be a debate among CSS developers regarding the preference for multi-line or single-line formatting. Some argue that multi-line is favored for its ease in finding specific properties within the CSS file. However, others believe that single- ...

csscoding-style

Is it possible to absolutely position an element using its own bottom edge as a reference point?

Looking to achieve precise positioning of an element just off the top of the screen, specifically a sliding menu. Utilizing position: absolute and top: 0px is straightforward, but this aligns the element based on its top edge. Is there a way to achieve th ...

csscss-positionabsolute

Issue with CSS Media Queries: Preventing an Element From Being Affected

As a complete beginner in HTML and CSS, I have a question that may seem silly. Recently, I created this HTML code: * { margin: 0px; padding: 0; box-sizing: border-box; } p { font-size: 14px; font-family: 'Work Sans', 'sans seri ...

htmlcss

Issue with integrating SQL and PHP/HTML using a web form

I've encountered some challenges while attempting to create a social network database, specifically with inserting values into the user_ table. The database setup is in place, but there are no updates happening (no output code when redirecting to PHP ...

phphtmlsql

The width of the Div element cannot be consistently preserved in Safari when viewing on an iPad

I'm facing a peculiar issue that seems simple at first glance, but has me stumped. On a webpage using Bootstrap, there's a div with the following code: .appSection{ background-color: #000000; padding:20px; border:1px solid #67c1d ...

htmlcsstwitter-bootstrap

The option to "open in new tab" is absent from the right-click menu when clicking a link on a website

Why does the option to open a link in a new tab not appear when using JavaScript or jQuery, but it works with an anchor tag? I have tried using window.location and window.open, as well as adding the onclick attribute to a div, but the option still doesn&ap ...

javascriptjquerycsshtml

JavaScript encountered an issue when trying to display HTML content

Through my PHP code, I am attempting to create a popup window that displays the content of an HTML file. However, after adding script tags, no HTML content is displayed. When I tried echoing out $row2, only the word 'array' appeared on the screen ...

phpjavascripthtmlajax

Update the less mixin

I attempted to eliminate the border radius from all Bootstrap elements by creating a custom-mixins.less file with the following lines in it. My intention was for these lines to overwrite the original .border-radius mixin, but unfortunately, it did not work ...

csslessmixins

Maximizing Efficiency on the Frontend: Balancing Requests with Caching

I am currently tackling a large website that has accumulated quite a bit of technical debt that needs to be addressed. The site contains a significant amount of JavaScript and CSS files being loaded. Currently, these files are aggregated and minified in la ...

javascripthtmlcssperformancefrontend