HTML表格CSS邊框問題

這是我的HTML代碼。HTML表格CSS邊框問題

<table cellspacing="0" class="assets_table"> 
<tbody> 
<tr class="table_header"><td>ID</td><td>Title</td><td>Regarding</td><td>Status</td><td>Date</td></tr> 
<tr><td>9</td><td>Testing</td><td>hijacked account</td><td></td><td> 4 Jan, 2012</td></tr></tbody> 
</table>

這裏是它的CSS。

.assets_table{width:100%;border-radius:4px 4px 0 0;border:1px solid #ccc;overflow:hidden} 
.assets_table .table_header{background:grey;height:30px;font-weight:bold;padding:0;border-top:1px solid #f9f9f9;} 
.assets_table td {padding:5px 10px} 
.assets_table tr {border-top:1px solid #ddd;padding:0 10px;}

但是，沒有內邊距或邊框或邊界半徑的實用上不會有任何的tr的工作。這是我得到的。 http://pastehtml.com/view/bjmptfulh.html

我已經試過所有我能想到的，但沒有工作？我試過display:table和display:block，但它只是有點弄亂了桌子。這裏有幫助嗎？

來源

2012-01-04 Frank

是什麼瀏覽器您使用？您的示例在Safari中適合我。 – 2012-01-04 19:46:56

在Chrome中正常工作... – cdeszaq 2012-01-04 19:49:47

如果您查看css中的'tr'屬性，我使用chrome，我不認爲您知道我期待它做什麼。它說'border-top：1px solid #ddd; padding：0 10px;'它的頂部顯然沒有灰色邊框，沒有10px的頂部和底部填充。 – Frank 2012-01-04 19:50:56

我認爲你需要的CSS應用到TD元素，在這個崗位解釋說：Space between two rows in a table?。否則你的代碼看起來不錯。

來源

2012-01-04 19:54:46 jurgemaister

哈哈是的，我只是這樣做，並在我真正看過這篇文章之前工作。謝謝！ – Frank 2012-01-04 19:55:35

如果您在Chrome中查看您的代碼，它實際上可以與桌面上的圓角以及所有yoru其他樣式一起使用。如果您未使用Chrome或Webkit瀏覽器（safari，chrome），則需要添加其他邊框半徑標籤。

對於Mozilla（火狐），您將需要添加-moz-邊界半徑：4PX遞四方0 0; 對於Opera，您需要添加-o-border-radius：4px 4px 0 0; 我也添加-khtml-border-radius：4px 4px 0 0;對於使用Konqueror網絡瀏覽器的一些較舊版本的Opera和瀏覽器。

你還需要檢查這些不同形式的樣式的語法不是一切使用相同的標記。例如，-moz-使用-mox-border-radius-topright更改右上角，而-webkit-使用-webkit-border-top-left-radius調整該角點。

這是一篇關於邊框半徑和一些新的CSS3標籤的好文章。 Thsi文章是從2009年這樣一些事情已經改變了：

CSS Tricks border radius example

來源

2012-01-04 19:57:22 prosborne

HTML表格CSS邊框問題

回答

相關問題