CSS Table Styling: Separate Borders and Borders for Row Groups

Question

I've been struggling with styling this table. The header titles need to have separate underlines, and I need a separating line between the two groups of "Name" rows. (These will be different in the final render.)

This is what it looks like presently:

This is what I'm looking for:

I have a Codepen if you want to see it in action: Table Styling Codepen

I've been experimenting with border-collapse. I was able to get separate borders under some conditions, and the section separator under others. But there were always issues, such as no spacing between cells, so the styling looked very cramped.

Here's the HTML:

<table class="data-table">
<thead>
    <tr>
        <th></th>
        <th colSpan="2" class="title">Source</th>
        <th colSpan="2" class="title">Destination</th>
    </tr>
    <tr>
        <th></th>
        <th colSpan="1" class="fieldname title">Field</th>
        <th colSpan="1" class="title">Value</th>
        <th colSpan="1" class="fieldname title">Field</th>
        <th colSpan="1" class="title">Value</th>
    </tr>
</thead>
<tbody class="bodySection">
    <tr>
        <td rowSpan="2" class="side-title">Name</td>
        <td class="fieldname src-data">Short Name</td>
        <td class="fieldvalue src-data"My Store/td>
        <td class="fieldname dest-data">Short Name</td>
        <td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
    </tr>
    <tr>
        <td class="fieldname src-data">Long Name</td>
        <td class="fieldvalue src-data"My Store/td>
        <td class="fieldname dest-data">Long Name</td>
        <td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
    </tr>
</tbody>
<tbody class="bodySection">
    <tr>
        <td rowSpan="2" class="side-title">Name</td>
        <td class="fieldname src-data">Short Name</td>
        <td class="fieldvalue src-data"My Store/td>
        <td class="fieldname dest-data">Short Name</td>
        <td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
    </tr>
    <tr>
        <td class="fieldname src-data">Long Name</td>
        <td class="fieldvalue src-data"My Store/td>
        <td class="fieldname dest-data">Long Name</td>
        <td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
    </tr>
</tbody>

And here's the CSS:

body {
  padding: 10px;
}

.data-table {
  width: 100%;
  border-spacing: 0 4px;
  border-collapse: separate;

  thead tr th {
    border-collapse: separate; 
    border-spacing: 0 5px;
  }
  .title {
    border-bottom: 1px solid #bbb;
    text-align: left;
    border-spacing: 0 5px;
  }

  .side-title {
    transform: rotate(-90deg);
    width: 25px;
  }
  .fieldname {
    width: 130px;
  }
  .fieldvalue.dest-data input[type=text] {
    width: 100%;
  }
  .bodySection {
    border-bottom: 10px solid #bbb;
    margin-bottom: 10px;
  }
  tr {
    // border-bottom: 10px solid #bbb;
  }
}

Thanks for your help.

Answer 1

Replace your header with (I've added a div inside each th):

<thead>
    <tr>
        <th></th>
  <th colSpan="2" class="title"><div>Source</div></th>
        <th colSpan="2" class="title"><div>Destination</div></th>
    </tr>
    <tr>
        <th></th>
        <th colSpan="1" class="fieldname title"><div>Field</div></th>
        <th colSpan="1" class="title"><div>Value</div></th>
        <th colSpan="1" class="fieldname title"><div>Field</div></th>
        <th colSpan="1" class="title"><div>Value</div></th>
    </tr>
</thead>

Than replace your .title with:

.title {
  text-align: left;
  padding-right: 5px;
}
tr .title:last-child {
  padding-right: 0px;
}
.title div {
  width: 100%;
  border-bottom: 1px solid #bbb;
}

And your .bodySection with:

   .bodySection tr:last-child td { 
     border-bottom: 1px solid #bbb; 
     padding-bottom: 15px; 
  } 
  .bodySection tr:first-child td { 
    padding-top: 10px; 
  } 

That's the snippet:

body {
  padding: 10px;
}

.data-table {
  width: 100%;
  border-spacing: 0 4px;
  border-collapse: separate;
}
  .title {
    text-align: left;
    padding-right: 5px;
  }
  tr .title:last-child {
    padding-right: 0px;
  }
  .title div {
    width: 100%;
    border-bottom: 1px solid #bbb;
  }

  .side-title {
    transform: rotate(-90deg);
    width: 25px;
  }
  .fieldname {
    width: 130px;
  }
  .fieldvalue.dest-data {
    padding-right: 5px;
  }
  .fieldvalue.dest-data input[type=text] {
    width: 100%;
  }
   .bodySection tr:last-child td { 
     border-bottom: 1px solid #bbb; 
     padding-bottom: 15px; 
  } 
  .bodySection tr:first-child td { 
    padding-top: 10px; 
  } 
  tr {
    // border-bottom: 10px solid #bbb;
  }

<table class="data-table">
	<thead>
		<tr>
			<th></th>
      <th colSpan="2" class="title"><div>Source</div></th>
			<th colSpan="2" class="title"><div>Destination</div></th>
		</tr>
		<tr>
			<th></th>
			<th colSpan="1" class="fieldname title"><div>Field</div></th>
			<th colSpan="1" class="title"><div>Value</div></th>
			<th colSpan="1" class="fieldname title"><div>Field</div></th>
			<th colSpan="1" class="title"><div>Value</div></th>
		</tr>
	</thead>
	<tbody class="bodySection">
		<tr>
			<td rowSpan="2" class="side-title">Name</td>
			<td class="fieldname src-data">Short Name</td>
			<td class="fieldvalue src-data"My Store/td>
			<td class="fieldname dest-data">Short Name</td>
			<td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
		</tr>
		<tr>
			<td class="fieldname src-data">Long Name</td>
			<td class="fieldvalue src-data"My Store/td>
			<td class="fieldname dest-data">Long Name</td>
			<td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
		</tr>
	</tbody>
	<tbody class="bodySection">
		<tr>
			<td rowSpan="2" class="side-title">Name</td>
			<td class="fieldname src-data">Short Name</td>
			<td class="fieldvalue src-data"My Store/td>
			<td class="fieldname dest-data">Short Name</td>
			<td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
		</tr>
		<tr>
			<td class="fieldname src-data">Long Name</td>
			<td class="fieldvalue src-data"My Store/td>
			<td class="fieldname dest-data">Long Name</td>
			<td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
		</tr>
	</tbody>
</table>