Inset表中水平边框上的边距

Question

我坐在一个带有彩色背景的div里面。我正在使用border-style：整个表格的插图。表格的每一行都需要有一个底部边框，我也完成了。但是，这些底部边框扩展了表格的整个宽度。我想在左侧和右侧有一些空白区域，就好像桌子的左右两边都有宽大的白色边框。

如何实现此目的并同时保留插图？我唯一能想到的就是将所有东西嵌入带有插入物的外部单细胞表中。有更优雅的方式吗？

FWIW，这是我目前的代码：

CSS

.table {
  width: 274px;
  height: 300px;
  border-collapse: collapse;
  background-color: #ffffff;
  border-color: #999999;
  border-style: inset;
}

.table td {
  margin: 6px 0px 6px 10px;
  padding: 6px 0px 6px 10px;
  border-bottom:thin;
  border-bottom-color: #999999;
  border-bottom-style: solid;
}

HTML

<div id="item" class="color1">
  <h3>TITLE</h3>
  <table class="table">
    <tr>
      <td>TEXT R1<C1/td>
      <td>TEXT R1 C2</td>
    </tr>
    <tr>
      <td>TEXT R2 C1</td>
      <td>TEXT RC C2</td>
    </tr>
   </table>
</div>

Answer 1

你可以把

margin-right margin-left 

表的

或

padding-left padding-right 

取决于您希望如何看到此空白区域。