如何在 table 周围均匀添加边框？

Question

我目前正在尝试在 table 周围添加边框，边框的厚度和数量都均匀。这是我目前拥有的 JSbin 的 link：https://jsbin.com/jibevalope/edit?html,css,js,output。

现在 CSS 看起来像这样：

.withGrid .sapMListTblCell:not(:first-child) {
 border: 1px solid;
}

我正在为减去 first-child 的每个 table 单元格添加边框。这种作品除了底部单元格的底部保持无边框，顶部单元格的顶部有一个比其他边框更薄的边框。

我怎样才能做到这一点？

Answer 1

一种方法是给整个tableborder-right和border-bottom，同时给所有单元格相反的border-left和border-top。

table {
  border-right: 1px solid blue;
  border-bottom: 1px solid blue;
}

td,
th {
  border-top: 1px solid blue;
  border-left: 1px solid blue;
}

<table cellpadding="10" cellspacing="0">
  <thead>
    <tr>
      <th>Name</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Joe</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>50</td>
    </tr>
    <tr>
      <td>John</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Kai</td>
      <td>50</td>
    </tr>
  </tbody>
</table>

如何在 table 周围均匀添加边框？

How to evenly add borders around table?

css

sapui5