Using border-spacing on table body rows exclusively

In my table, I have 2 header rows and multiple body rows. To create a spacing of 10 pixels between body rows, I used the following CSS:

border-collapse: separate;
border-spacing: 10px;

However, this also affected the spacing in the header rows, which I want to have no space between them. In my HTML code snippet, you can see that I am setting the border-spacing property for the entire table:

table td {
  background-color: lime;
  padding: 12px
}
table th {
  background-color: red;
  padding: 12px;
}
table {
  border-collapse: separate;
  border-spacing: 10px;
}
<table>
  <thead>
    <tr>
      <th>head 1</th>
      <th>head 1</th>
      <th>head 1</th>
    </tr>
    <tr>
      <th>head 2</th>
      <th>head 2</th>
      <th>head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

If you view the fiddle here, you will see that there is space between the first and second header rows. Is there a way to remove this space without affecting the body rows? I attempted to apply border-spacing only to the body rows, but it seems to only work at the table level. Any suggestions or solutions would be appreciated.

htmlcss

Answer №1

Although the question is old and redundant,

you can utilize transform, box-shadow, or position to create a simulated collapse between 2 rows (or more):

  • transform :

table td {
  background-color: lime;
  padding: 12px 12px 12px 12px;
}

table th {
  background-color: red;
  padding: 12px 12px 12px 12px;
}

table {
  border-collapse: separate;
  border-spacing: 10px;
}

thead tr:first-of-type {
  transform: translatey(10px)
}
<table>
  <thead>
    <tr>
      <th>head 1</th>
      <th>head 1</th>
      <th>head 1</th>
    </tr>
    <tr>
      <th>head 2</th>
      <th>head 2</th>
      <th>head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

  • position :

table td {
  background-color: lime;
  padding: 12px 12px 12px 12px;
}

table th {
  background-color: red;
  padding: 12px 12px 12px 12px;
}

table {
  border-collapse: separate;
  border-spacing: 10px;
}

thead tr:first-of-type {
  position:relative;
  top:10px
}
<table>
  <thead>
    <tr>
      <th>head 1</th>
      <th>head 1</th>
      <th>head 1</th>
    </tr>
    <tr>
      <th>head 2</th>
      <th>head 2</th>
      <th>head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

  • box-shadow :

table td {
  background-color: lime;
  padding: 12px 12px 12px 12px;
}

table th {
  background-color: red;
  padding: 12px 12px 12px 12px;
}

table {
  border-collapse: separate;
  border-spacing: 10px;
}

thead tr:first-of-type th {
  box-shadow:0 10px red
}
<table>
  <thead>
    <tr>
      <th>head 1</th>
      <th>head 1</th>
      <th>head 1</th>
    </tr>
    <tr>
      <th>head 2</th>
      <th>head 2</th>
      <th>head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

Answer №2

The CSS property border-spacing is typically used with table elements. It cannot be directly targeted for the tbody element alone. However, you can implement a CSS hack by applying border: white to the td element to achieve a margin effect.

Try out the following additional code snippet:

table td {
  border: 10px solid white;
  border-right: 0;
  border-left: 0;
}

Expected Output:

table td {
  background-color: lime;
  padding: 12px 12px 12px 12px;
  border: 10px solid white;
  border-right: 0;
  border-left: 0;
}
table th {
  background-color: red;
  padding: 12px 12px 12px 12px;
}
table {
  border-collapse: separate;
}
<table>
  <thead>
    <tr>
      <th>head 1</th>
      <th>head 1</th>
      <th>head 1</th>
    </tr>
    <tr>
      <th>head 2</th>
      <th>head 2</th>
      <th>head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
   </tbody>
</table>

Answer №3

Experiment with creating a CSS class that utilizes padding and border-spacing

.customTable>tbody>tr>td {
  padding: 8px;
  border-spacing: 4px;
}

I've found success with this approach

Answer №4

.table th{
  background-color: red;
  padding: 12px;
}
  
.table td {
  background-color: green;
  padding: 12px;
}
.tablerow {
  border-bottom: 20px solid blue;
}
<table class="table">
  <thead>
      <tr class="tablerow">
          <th>head 1</th>
          <th>head 1</th>
          <th>head 1</th>
      </tr>
  </thead>    
  <tbody>
      <tr class="tablerow">
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
      </tr>
      <tr class="tablerow">
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
      </tr>
  </tbody>
</table>

It is functioning properly. This code adds a 20px border at the bottom of the rows for spacing and you can also apply a full border.

https://www.w3.org/TR/CSS2/tables.html

Answer №5

In my opinion, this is the way to accomplish it.

table.test td {
    background-color: lime;
    //margin: 12px 12px 12px 12px;
   padding: 12px 12px 12px 12px;
}

table.test th{
    background-color: red;
    padding: 12px 12px 12px 12px;
}

table.test tbody{
  border-collapse: separate;
  border-spacing: 10px;
  position:absolute; 
  *border-collapse: expression('separate', cellSpacing = '10px');
}
<table class="test">
    <thead>
        <tr>
            <th>head 1</th>
            <th>head 1</th>
            <th>head 1</th>
        </tr>  
        <tr>
            <th>head 2</th>
            <th>head 2</th>
            <th>head 2</th>
        </tr>
    </thead>    
    <tbody>
        <tr>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
    </tbody>
</table>

Here is the updated jsfiddle link

Jsfiddle

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

Replacing an array element in React.js

Here is a React.js code snippet where I am trying to utilize an array called distances from the file Constants.js in my Main.js file. Specifically, I want to replace the APT column in the sampleData with a suitable value from the array distances extracted ...

javascripthtmlreactjsmaterial-ui

Extract information from a database table for presentation as simple text

I am looking to extract information from each row and display it as plain text on the same page within a paragraph. Here is an example table for reference: <table> <thead> <tr> <th class="a header">A</th ...

javascriptphpjqueryhtml

The functionality of Google Maps code is limited on Android devices because the map feature is not available

After updating the Google Maps embed code to be responsive for mobile devices, I discovered that the map still won't display on Android or iPhone. The following is the modified code. Can anyone assist me in resolving this issue so that the map can sho ...

androidhtmlcssgoogle-mapsiframe

Utilizing grid for styling headings and paragraphs with h3, h4, and p tags

Looking for help with aligning posts in columns? Here's the code and display challenge: <div class="post-inner"> <h3 class="post-header"><a class="post-title" href="http://www.yellowfishjobs.com/job/sales-representative/">Sales Repr ...

css

The intl-tel-input dropdown feature is malfunctioning on mobile browsers

Currently, I have integrated the intl-tel-input library into my project for selecting international telephone numbers from a dropdown menu. https://i.sstatic.net/vPfpd.png While accessing the application on a web browser, the country flags display correc ...

cssangularjssassmobile-websiteintl-tel-input

Error: Timthumb is redirecting to a 404 page when trying to load image

Timthumb has been working perfectly on my live site, but suddenly stopped working on localhost. The image source is written as follows... Although the image opens when I click and open in a new tab, it does not display on the current page... <img src= ...

phphtmltimthumb

The picture above just won't stay within the div

Ensuring my website is responsive across all devices has been a priority for me. However, I have encountered an issue where, upon scaling down the size of the web browser, an image positioned within a div starts to overflow. While attempting to address thi ...

htmlcss

The background image fails to show up on the mobile device display

Currently, I am working on an app with Ionic, but unfortunately, the background image is not showing despite all my efforts. I have gone through various solutions provided in previous questions, but none of them seem to work for me. Here is the CSS I am u ...

htmlcssangularjsionic-framework

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

Is there a straightforward method to create a static web page and Node backend where the Node server runs in HTTPS during development but not in production? How can the static web page point to https://localhost/foo in dev mode, and simply /foo in producti ...

htmlnode.jsexpresswebpackdevelopment-environment

Automated resizing for various monitor dimensions in HTML

Is there a way to dynamically adjust the zoom level on an HTML webpage based on the monitor size? For instance, an image that appears large on a laptop screen may look small on a PC monitor. Is there a solution available to scale the picture size as the mo ...

javascripthtmlzooming

Using JQuery to switch out images that do not have an ID or class assigned

Currently, I am using a Google Chrome Extension to apply an external theme to a website. Unfortunately, the logo on the site does not have an ID or class that can be used to call it. I am searching for a solution to replace it with a different image. My ...

javascriptjquerycssgoogle-chrome-extension

The presence of parentheses in a JQuery selector

My database contains divs with ids that sometimes have parentheses in them. This is causing issues with my JQuery selector. How can I resolve this problem? Let me provide an example to illustrate: https://jsfiddle.net/2uL7s3ts/1/ var element = 'hel ...

javascriptjqueryhtml

Some websites are not displaying the CSS code for the inspector

In my experience, I have always relied on Firefox Inspector to troubleshoot CSS issues without any problems. However, when I attempted to analyze the CSS of a specific webpage (only encountering difficulties while logged in), I noticed that the inspector ...

cssfirefox-developer-tools

Having difficulty getting the sign operator to show up in a text field

Whenever the ADD div is clicked, "+" should be displayed on the textbox. The same goes for SUBTRACT, MULTIPLY, and DIVIDE. However, I am struggling to make the operators show on the textbox. Here is what I have managed to come up with so far. <!D ...

javascripthtmlcss

Tips on inserting text into form input fields

I need some guidance on how to enhance my form input functionality. The form currently consists of an input box and a submit button. When the user clicks submit, the form content is submitted and processed using javascript. What I am aiming for is to autom ...

javascripthtml

How can I switch between different images using jQuery?

HTML <div class="image_rollover"> <img id="image_one" src=image_one.png"> <img id="image_two" src="image_two.png"> <img id="image_three" src="image_three.png"> <img id="image_four" src="image_four.png"> ...

javascriptjquerycss

Issue with JavaScript not generating a header element within a specified div

function searchingFunction() { var searchInput = document.getElementById("searchbar"); if (searchInput.value != null) { var resultElement = document.createElement("h2"); resultElement.innerHTML = "Search results for " + searchInput.value; d ...

javascripthtmldom

What steps can I take to prevent the array from constantly updating and instead only show the final task?

<h1>Custom Calendar and Task Scheduler</h1> <div class="navigation-text">Use the arrows to switch between months</div> <div class="navigation-text">Click on a date to create tasks</div> &l ...

phphtmlarrays

Guide on Implementing Right-to-Left (RTL) Support in Material UI React

Currently, I am in the process of developing an application designed for LTR usage, but I am interested in adding RTL support as well. The application itself is built on top of Material UI React. By using CSS Flex Box, I have managed to rotate the applicat ...

javascriptcssreactjsmaterial-ui

What is the best way to align the middle item of a flexbox using CSS?

I am attempting to present text divided into 3 divs - the middle div contains the highlighted portion of the text, while the first and last divs contain the text before and after the highlighted section. Both the first and last flex items have classes tha ...

cssflexboxoverflowbootstrap-5