asp gridview css边框超出范围

Question

下面是gridview的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 */
}