Table with border-bottom that is shorter than the full width

Question

I have a table that needs to look like the attached image.

Notice the border under Name that does not extend the full length like the row highlight does. What I can't figure out is how to get the border to be short and the row background to extend to the edge of the containing div. Currently I'm applying padding to the first and last <td> cells to get the padding. My initial attempt was to apply the padding to the <tr> and apply the border to the <th>'s in the table head but it seems <tr>'s do not take padding even with border-collapse: collapse; set.

Here is an attached jsfiddle of the problem. The red border needs to be aligned with the td content.

https://jsfiddle.net/0vhqg4xe

Any ideas would be appreciated.

Answer 1

You can add a <span> tag around each text in <th>, and apply the border to it.

<th><span>Test 1</span></th>
<th><span>Test 2</span></th>

thead th span {
  display: block;
  border-bottom: 1px solid red;
}

.wrapper {
  background: blue;
  color: white;
  padding-top: 10px;
  padding-bottom: 10px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th {
  text-align: left;
  border: 0;
}
tr {
  border: 0;
}
thead th span {
  display: block;
  border-bottom: 1px solid red;
}
tr.highlight {
  background: green;
}
tr > td:first-child,
th:first-child {
  padding-left: 20px;
}
tr > td:last-child,
th:last-child {
  padding-right: 20px;
}

<div class="wrapper">
  <table>
    <thead>
      <tr>
        <th><span>Test 1</span>
        </th>
        <th><span>Test 2</span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr class="highlight">
        <td>Some Text</td>
        <td>Some Text</td>
      </tr>
      <tr>
        <td>Some Text</td>
        <td>Some Text</td>
      </tr>
      <tr>
        <td>Some Text</td>
        <td>Some Text</td>
      </tr>
    </tbody>
  </table>
</div>

Or, use a pseudo element for the border, so you won't need to change the HTML.

thead tr th {
  position: relative;
}
thead tr th:before {
  content: "";
  display: block;
  height: 1px;
  overflow: hidden;
  background: red;
  position: absolute;
  left: 20px;
  right: 0;
  bottom: 0;
}
thead tr th:last-child:before {
  left: 0;
  right: 20px;
}

.wrapper {
  background: blue;
  color: white;
  padding-top: 10px;
  padding-bottom: 10px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th {
  text-align: left;
  border: 0;
}
tr {
  border: 0;
}
thead tr th {
  position: relative;
}
thead tr th:before {
  content: "";
  display: block;
  height: 1px;
  overflow: hidden;
  background: red;
  position: absolute;
  left: 20px;
  right: 0;
  bottom: 0;
}
thead tr th:last-child:before {
  left: 0;
  right: 20px;
}
tr.highlight {
  background: green;
}
tr > td:first-child,
th:first-child {
  padding-left: 20px;
}
tr > td:last-child,
th:last-child {
  padding-right: 20px;
}

<div class="wrapper">
  <table>
    <thead>
      <tr>
        <th>Test 1</th>
        <th>Test 2</th>
      </tr>
    </thead>
    <tbody>
      <tr class="highlight">
        <td>Some Text</td>
        <td>Some Text</td>
      </tr>
      <tr>
        <td>Some Text</td>
        <td>Some Text</td>
      </tr>
      <tr>
        <td>Some Text</td>
        <td>Some Text</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

I've recently solved this problem, incase anybody comes across this post in the future, here it is.

Here is an image of the result ...

... here is the code ...

<style>

* {
   font-family: sans-serif; 
}

/* table wrapper for continuous border */
.table {
    width: 500px;
    border: solid 1px rgb(221,221,221);
    border-radius: 4px;
    overflow: hidden;
    text-align: left;
}

/* table border */
.table table {
    width: 100%;
    border-collapse: collapse; /* removes gap between cells */
}

.table thead th {
    font-weight: bold;
    background-color: rgb(245,245,245);
    border-bottom: solid 1px rgb(221, 221, 221);
}

/* cell padding */
.table th, td {
    padding: 10px;
}

/* add row hover */
.table tr:hover td {
    background-color: rgb(245,245,245);
}

/* create 1px gap in table for line */
.table tr.line-break td {
    position: relative;
    top: 1px;
}

/* create the line */
.table tr.line-break td:after {
    content: '';
    position: absolute;
    top: -1px;
    left: 0px;
    height: 1px;
    width: 100%;
    background-color: rgb(235,235,235);
}

/* reduce width of line for first and last cells, by cell padding amount */
.table tr.line-break td:first-child:after,
.table tr.line-break td:last-child:after {
    width: calc(100% - 10px);
}

/* pull line on first cell to the right */
.table tr.line-break td:first-child:after {
    right: 0px;
    left: auto;
}

</style>

<div class="table">
    <table>
        <thead>        
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Gender</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John</td>
                <td>Smith</td>
                <td>Male</td>
                <td>35</td>
            </tr>
            <tr class="line-break">
                <td>Steve</td>
                <td>Cook</td>
                <td>Male</td>
                <td>27</td>
            </tr>
            <tr>
                <td>Susan</td>
                <td>Walters</td>
                <td>Female</td>
                <td>34</td>
            </tr>
        </tbody>
    </table>
</div>

... and here is a link of a CodePen I made for the working solution.

https://codepen.io/latchy/pen/wvwoxXe

The reason the table is wrapped inside a DIV is so that when I push the table row down 1px to allow for the height of the line, the border on the sides is not broken. It also makes it easy to apply a border radius to the table.

Hope this helps someone!

-- Latchy