CODEWITHSUNDEEP
htmlcss
Mark
Mark

Reputation: 5088

Apply border-spacing to table body rows only

I have a table with 2 header rows and multiple body rows. I want the spacing between rows in the body to be 10 pixels. I achieve this with:

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

However, this also obviously applies to the rows in the header. But for the header, I want there to be no space between the rows. My HTML is:

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;
}
<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>

The fiddle is here. I want there to be no space between the bottom of the first header row and top of second header row. I've tried applying border-spacing just to the body but it only works at table level. Any ideas?

Upvotes: 7

Views: 15073

Answers (5)

talha_ah
talha_ah

Reputation: 376

.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's working fine. It puts a border of 20px in the bottom of the rows that can be used as a spacing between rows and you can apply full border also.

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

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105873

As an old question but redundant,

you may use transform, box-shadow or position to fake collapsing in 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>

Upvotes: 4

m4n0
m4n0

Reputation: 32255

The border-spacing is applied to table elements and can not be targeted for tbody alone but you can try the below CSS hack and apply border: white to the td element to create a margin effect.

Additional Code:

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

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>

Upvotes: 3

Himesh Aadeshara
Himesh Aadeshara

Reputation: 2121

I think this how you can achieve.

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>

below is the updated jsfiddle

Jsfiddle

Upvotes: -1

Mayobirne
Mayobirne

Reputation: 61

try to make a class in CSS using padding/border-spacing

.tableClass>tbody>tr>td {
  padding: 12px 12px 12px 12px;
}

this usually works for me

Upvotes: 1

Related Questions