css - Inset 表格中水平边框的边距

Question

我有一张 table ，放在一个带有彩色背景的 div 中。我正在为整个表格使用 border-style:inset。表格的每一行都需要有一个底部边框，我也已经完成了。但是，这些底部边框扩展了表格的整个宽度。我希望左右各有一些空白，就好像表格的左右各有宽的白色边框一样。

我怎样才能做到这一点并同时保留插图？我唯一能想到的就是将所有内容嵌套在带有插图的外部单单元格表格中。有没有更优雅的方式？

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 

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