如何創建一個圓邊和像網格表一樣的表格？

我已經嘗試了很多東西來獲得圓的邊緣，但它不起作用。下面的代碼我到目前爲止：如何創建一個圓邊和像網格表一樣的表格？

<div style="border-radius: 5px;"> 
    <table style="margin-left: 10px; padding-right: 0px; width: 710px;border-collapse:collapse; border-radius: 5px;" 
    class="ui-widget-content"> 
     <tr class="ui-state-default"> 
      <th>abc</th> 
      <th>def</th> 
      <th>xxx</th> 
      <th>xxx</th> 
     </tr> 
     <tr> 
      <th>a</th> 
      <th>b</th> 
      <th>c</th> 
      <th>d</th> 
     </tr> 
    </table> 
</div>

我真正瞄準是有一個表，看起來像這樣：grid任何人都可以建議我怎麼能拿頂部面板，底部面板和圓角（CSS ）？

請注意，我試圖混合一些jQuery UI主題類。但這些似乎沒有幫助，所以我認爲他們需要刪除。我只是想要一個非常簡單的實現，看起來像上面的例子中的網格。

來源

2012-01-16 Samantha J T Star

你試過什麼東西？你做了什麼事？ – 2012-01-16 13:42:56

我試過上面的代碼。我在桌子上放置邊界半徑，並在其周圍放置一個div。但是我的瀏覽器裏沒有圓角，這是最新的Firefox。 – 2012-01-16 13:47:52

什麼是頁面的文檔類型？ – 2012-01-16 13:48:24

在哪些瀏覽器上面寫的代碼不工作???

上面粘貼的代碼僅適用於IE9，我認爲。

你應該有一些像這樣的事情在你的CSS：

.roundedCorners{ 
     -webkit-border-radius: 10px;/*For Google Chrome*/ 
     -moz-border-radius: 10px;/*For Mozilla*/ 
     border-radius: 10px;/*Standard Specification*/ 
    }

來源

2012-01-16 15:11:25

您的代碼不工作;然而，你不能看到它沒有背景顏色。當我添加「背景顏色：＃f00;」我可以很好地看到它。我還建議遵循X-Ware的代碼，因爲這種類型的CSS沒有批准。因此，該代碼用於解決將來可能出現的任何兼容性問題。

請記住，圓角不適用於IE6，IE7，IE8或IE9。爲此，我推薦CSS3 Pie

來源

2012-01-16 15:56:21 KayleL

Border-radius在IE9中工作。你可能應該向你的IE6-8用戶顯示正常的角落。 CSS3 Pie在性能上相當重要，畢竟，這些圓角對於你的任何用戶來說可能都不是至關重要的。 – Leo 2012-01-16 16:05:59

如何創建一個圓邊和像網格表一樣的表格？

回答

相關問題