Mike Mike - 7 months ago 10
HTML Question

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

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.

enter image description here

Answer

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>