asp gridview css邊框超出範圍

以下是gridview的css和asp代碼。邊界正在蔓延，然後預計。我嘗試設置Width = 100％哪些工作，但我希望邊界遵循網格的大小，而不是傳播網格視圖佔用空間不必要的。asp gridview css邊框超出範圍

這是一個ASP的GridView用CSS四捨五入的角落

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>

來源

2017-07-12 The Novice Programmer

生成的html看起來像什麼？ – realbart

我已將圖像放在頂部。我不知道爲什麼它沒有顯示內聯。它的一個超鏈接說：「這是一個用於倒角的CSS的Asp Gridview」@realbart –

我看到了圖像，但我不記得asp.net gridview生成的html是什麼。您應該在瀏覽器中查看生成的html，並將其用於樣式。嘗試顯示：內嵌塊 – realbart

我認爲網格呈現：

<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 */ 
}

來源

2017-07-12 22:41:35 realbart

其工作兄弟謝謝，我只需要清除我的緩存。非常感謝你的幫助人。 –

如果我設置寬度的百分比，它仍然有效，但如果我將它設置爲某些像素，它可以正常工作。任何解決方案？ –

asp gridview css邊框超出範圍

回答

相關問題