How to give cell spacing to thead only?

Question

I want to make a table such that there is cellspacing (like you get when you make border-collapse: separate) only in the thead section and not in the tbody section.

I can make two tables like so

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

table.table1 th {
  border: solid;
}

table.table2 {
  border-spacing: 10px;
  border-collapse: collapse;
  border: solid;
}
table.table2 td {
  border: solid;
}

<table class="table1">
  <thead>
   <tr> 
     <th> col1 </th>
     <th> col2 </th>
     <th> col3 </th>
     <th> col4 </th>     
   </tr>
  </thead>
</table>

<table class="table2">
  <tbody>
   <tr> 
     <td> val1 </td>
     <td> val2 </td>
     <td> val3 </td>
     <td> val4 </td>     
   </tr>
   <tr> 
     <td> val21 </td>
     <td> val22 </td>
     <td> val23 </td>
     <td> val24 </td>     
   </tr>
  </tbody>
</table>

But the widths might not match and then I would have to write a js script that matches the widths which is tedious and I do not think the right way to do it.

What I want is something like this

Please help

@Rahul because using a single table was not working :) . The solution proposed below seems promising. I will resolve this after I have looked into the answers :) — Prasanna, Dec 18 '18 at 06:53

score 3 · Accepted Answer · answered Dec 18 '18 at 06:36

Use one table and set :after to each th to make space

.table1 {
  border-spacing: 10px;
  border-collapse: collapse; 
  border: solid;
}

table.table1 th {
  border: solid;
  margin:5px;
      position: relative;
}

table.table1 tr {
  border-bottom: solid;
}
th:after{
    content: '';
    border-right: 5px solid white;
    position: absolute;
    height: 100%;
    border: 2px solid;
    top: -3.5px;
    width: 1.5px;
    background: white;
    border-top-color: white;
    right: -5px;
}
th:last-child:after{
border-right-color: white;
border-bottom-color: white;
right: -6px;
}

<table class="table1">
  <thead>
   <tr> 
     <th> col1 </th>
     <th> col2 </th>
     <th> col3 </th>
     <th> col4 </th>     
   </tr>
  </thead>
  <tbody>
   <tr> 
     <td> val1 </td>
     <td> val2 </td>
     <td> val3 </td>
     <td> val4 </td>     
   </tr>
   <tr> 
     <td> val21 </td>
     <td> val22 </td>
     <td> val23 </td>
     <td> val24 </td>     
   </tr>
  </tbody>
</table>

AG_ · Answer 2 · 2018-12-18T07:09:29.803

Have a look at below snippet, I have used before to get the desired layout.

table {
  border-spacing: 10px;
  border-collapse: collapse;
  border-bottom: 1px solid;
  
}

thead th{
  position:relative;
  padding:10px 20px;
}

tbody td{
  padding: 10px 20px;
  text-align:center
}
thead th:before {
    content: "";
    position: absolute;
    width: calc(100% - 5px);
    height: 100%;
    background: #fff;
    z-index: -1;
    margin: -10px -20px;
    border: 1px solid;
    box-sizing: border-box;
    border-bottom: none;
  
}
thead th:last-child:before {
 
  width:calc(100% + 1px);
  
}


tbody tr {
  border: 1px solid;
  border-bottom:none
  
}

<table class="table1"  >
  <thead>
   <tr> 
     <th> col1col1col1col1col1col1 </th>
     <th> col2col2 </th>
     <th> col3col3col3col3col3col3 </th>
     <th> col4col4col4 </th>     
   </tr>
  </thead>

  <tbody>
   <tr> 
     <td> val1 </td>
     <td> val2 </td>
     <td> val3 </td>
     <td> val4 </td>     
   </tr>
   <tr> 
     <td> val21 </td>
     <td> val22 </td>
     <td> val23 </td>
     <td> val24 </td>     
   </tr>
  </tbody>
</table>

score 1 · Answer 3 · answered Dec 18 '18 at 07:30

Another approach using div inside th

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

th {
  position: relative;
  padding: 0;
}

tr {
  border-width: 1px;
  border-color: #000;
  border-bottom-style: solid;
}

tbody tr {
  border-left-style: solid;
  border-right-style: solid;
}

th > div {
  border-width: 1px 1px 0 1px;
  border-style: solid;
  margin-right: 15px;
  text-align: center;
}

th:first-child  > div {
  margin-left: 0;
}

th:last-child > div {
  margin-right: -1px;
}

<table>
  <thead>
    <tr>
      <th>
        <div>
          col1
        </div>
      </th>
      <th>
        <div>
          col2
        </div>
      </th>
      <th>
        <div>
          col3
        </div>
      </th>
      <th>
        <div>
          col4
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> val1 </td>
      <td> val2 </td>
      <td> val3 </td>
      <td> val4 </td>
    </tr>
    <tr>
      <td> val21 </td>
      <td> val22 </td>
      <td> val23 </td>
      <td> val24 </td>
    </tr>
  </tbody>
</table>

This was very interesting. But I already had a table built and could not change the htmls of the table as it was being used everywhere. The selected answer lets me obtain the desired result with css only. Otherwise a very good solution — Prasanna, Dec 18 '18 at 07:40

score 0 · Answer 4 · answered Dec 18 '18 at 06:21

0

Try this,

thead tr {
      border-right: 5px solid white;
    }

Also this will be useful, Spacing between thead and tbody

answered Dec 18 '18 at 06:21

rcanpahali

2,565
2
21
37

score 0 · Answer 5 · answered Dec 18 '18 at 07:42

Not the best way to do it but, there you go.

th:nth-child(odd)
{
   border: 1px solid #000;
}

td
{
   border-top: 1px solid #000;
   border-bottom: 1px solid #000;
   text-align: center;
}

td:first-child
{
   border-left: 1px solid #000;
}

td:last-child
{
   border-right: 1px solid #000;
}

table
{
    border: none;
    border-collapse: collapse;
    padding: 0;
    margin: 0;

}

<table class="table1">
  <thead>
   <tr> 
     <th> col1 </th>
     <th> &nbsp; </th>
     <th> col2 </th>
     <th> &nbsp;</th>
     <th> col3 </th>
     <th> &nbsp;</th>
     <th> col4 </th>

 
   </tr>
  </thead>
  <tbody>
   <tr> 
     <td> val1 </td>
     <td> &nbsp; </td>
     <td> val2 </td>
     <td> &nbsp; </td>
     <td> val3 </td>
     <td> &nbsp; </td>
     <td> val4 </td>     
   </tr>
   <tr> 
     <td> val21 </td>
     <td> &nbsp; </td>
     <td> val22 </td>
     <td> &nbsp; </td>
     <td> val23 </td>
     <td> &nbsp; </td>
     <td> val24 </td>     
   </tr>
  </tbody>
</table>

How to give cell spacing to thead only?

5 Answers5