我有一张桌子坐在一个带有彩色背景的 div 内。我正在为整个表格使用边框样式:插图。表格的每一行都需要有一个底部边框,我也完成了。但是,这些底部边框会扩展表格的整个宽度。我想在左右两边留一些空白,就好像桌子的左右两边都有宽阔的白色边框一样。
我怎样才能做到这一点并同时保留插图?我唯一能想到的就是将所有内容嵌套在一个带有插图的外部单单元表中。有没有更优雅的方式?
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>