<分区>
我有一些表格，其中包含一些行和列以及表格前后的一些文本。见fiddle .
html:
<div>
<div>
some text.....
</div>
<table class="children-table" style="width: 100%">
<tbody>
<tr class="title-table">
<td class="name">
name
</td>
<td class="order-reason">
reason
</td>
<td class="cost">
cost
</td>
</tr>
<tr class="child-record">
<td class="name">
Dan
</td>
<td class="order-reason">
Stolen
</td>
<td class="cost">
10
</td>
</tr>
<tr>
<td colspan="3">
<div class="thick-divide">
</div>
</td>
</tr>
<tr class="bold total">
<td class="name" colspan="2">
total
</td>
<td class="cost">
10
</td>
</tr>
</tbody>
</table>
<div>
another text...
</div>
</div>
CSS:
table.children-table
{
border-style: solid;
border-width: 1px;
overflow: hidden;
border-collapse: collapse;
border-color: red;
border-radius: 10px;
}
tr.title-table
{
background: black;
color: white;
}
tr.total
{
padding: 2% 2% 2% 0;
background: white;
}
tr.child-record
{
background: white;
}
td.name
{
width: 20%;
padding: 1% 2% 1% 2%;
}
td.order-reason
{
width: 60%;
padding: 1% 2% 1% 0;
}
td.cost
{
width: 20%;
direction: ltr;
padding: 1% 2% 1% 3%;
}
td.bold
{
font-weight: bold;
}
.thick-divide
{
height: 0px;
width: 100%;
font-weight: bold;
border: 0;
border-top: 3px solid #E0E0E0;
}
我想在 table 周围有一个边框(在拐 Angular 处是圆的)。
我该怎么做？我尝试使用 border-color 但它没有用