asp网格视图css边框超出范围

Question

下面是网格视图的css和asp代码。边境线正在扩大，这是预料之中的。我尝试设置Width=100%，但我希望边框遵循网格的大小，而不是扩展网格视图，以不必要地占用空间。

这是一个用于四舍五入的带有css的Asp Gridview。

CSS：

    .rounded-corners {
        border: 1px solid #565656;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        overflow: hidden;
}


    .Grid td, .Grid th {
        border: 1px solid #565656;
        text-align: center; 
        padding-top: 3.5px;
        padding-bottom: 3.5px;
        font-size: medium;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',     'Lucida Sans', Arial, sans-serif;
    }

源代码：

<div class="rounded-corners">
<div>
<table class="Grid" cellspacing="0" rules="all" border="1" style="border-collapse:collapse;">
<tbody>
<tr>
<th>Description</th>
<th>Time</th>
<th>Time</th>
</tr>
<tr>
<td>abc</td>
<td>07:30</td>
<td>07:30</td>
</tr>
<tr>
<td>def</td>
<td>07:30</td>
<td>07:30</td>
</tr>
<tr>
<td>ghi</td>
<td>07:30</td>
<td>07:30</td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 1

我认为网格是这样呈现的：

<div class="Grid" id="XXXX_gv1">
<table>
<tr><th>column 1</th><th>column 2</th><th>column 3</th></tr>
<tr><td>value 1</td><td>value 2</td><td>value 3</td></tr>
<tr><td>value 1</td><td>value 2</td><td>value 3</td></tr>
</table>
</div>

这样你就可以把它写成这样：

.Grid {
    display:inline-block; /* trick to not take 100%. */
    /* alternatively: you could border .Grid>table */
    border-radius:8px;
}

.Grid>table>tbody>tr:first-row {
  /* special stuff for the first row here */
}