html - 每行底部的填充边框或 hr

Question

有没有更简单的方法，无需任何技巧，让它在视觉上看起来像这样(底部边框从每边填充 10 像素)，而不必为此创建额外的行？

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>