每行底部的填充边框或小时

Question

是否有一种更简单的方法,没有任何类型的黑客攻击,使其在视觉上看起来像这样(从每边填充10px的底部边框),而不必为它创建额外的行？

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

td {
  background: #eee;
  padding: 0 10px;
}

<table>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
  </tr>
  <tr>
  <td colspan="5">
    <hr style="border-bottom: solid 1px #000; padding: 0 10px"/>  
  </td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
  </tr>
    <td colspan="5">
    <hr style="border-bottom: solid 1px #000; padding: 0 10px"/>  
  </td>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
  </tr>
</table>

Answer 1

我不知道你要做什么,但是这里有一个看起来像你的例子的方式的表,只有没有嵌套表.
这大致是你追求的吗？

table {
  border-spacing: 0 4px;
  width: 100%;
}

td {
  background: #eee;
  width:20%;
  border-bottom: 1px solid #000;
}

td:first-child {
  border-left: 10px solid #eee;
}

td:last-child {
  border-right: 10px solid #eee;
}

<table>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
  </tr>
</table>