無法在WordPress中製作CSS圓角桌

我通讀了相關文章，但沒有一篇能解決我的問題。無法在WordPress中製作CSS圓角桌

我有嵌入在我的WordPress網站的表格，我只帶走了標題菜單和頁腳，演示站點可以從http://www.solepropr.net/demo/wordpress_table.html

如果查看CSS設置爲第一屆邊界訪問時，border-頂部左半徑是6px，但實際輸出仍然是一個直角。無論我設定的半徑大小有多大，角落都沒有變化。

下面是計算樣式從Chrome開發者工具

-webkit-font-smoothing: antialiased; 
border-bottom-color: rgb(0, 146, 215); 
border-bottom-left-radius: 0px; 
border-bottom-right-radius: 0px; 
border-bottom-style: solid; 
border-bottom-width: 2px; 
border-collapse: collapse; 
border-image-outset: 0px; 
border-image-repeat: stretch; 
border-image-slice: 100%; 
border-image-source: none; 
border-image-width: 1; 
border-left-color: rgb(0, 146, 215); 
border-left-style: solid; 
border-left-width: 2px; 
border-right-color: rgb(0, 146, 215); 
border-right-style: solid; 
border-right-width: 2px; 
border-top-color: rgb(0, 146, 215); 
border-top-left-radius: 6px; <<<<<<<<---------- 
border-top-right-radius: 0px; 
border-top-style: solid; 
border-top-width: 2px; 
box-sizing: border-box; 
color: rgb(112, 112, 112); 
direction: ltr; 
display: table-cell;

來源

2014-10-31 Kelvin

添加CSS財產border-collapse: separate在例如， .round-table類

.round-table { 
    border-radius: 10px; 
    border-collapse: separate; 
}

來源

2014-10-31 17:33:06 pbaldauf

感謝pbaldauf，它可以幫助解決這個問題，但我不知道如何邊界崩潰：影響這個，可以簡單的描述一下？ – Kelvin 2014-10-31 17:48:17

在w3.org文檔（http://www.w3.org/TR/css3-background/#border-radius-tables）中寫爲「CSS3 UA應該忽略應用於內部表格元素的border-radius屬性，當'border 「崩潰」是「崩潰」。不幸的是，我只能告訴你。 – pbaldauf 2014-10-31 18:03:03

顯然，你不能設置一個邊界第一個內部邊界半徑屬性的輸出。解決方法是將顯示更改爲內嵌塊。但是，似乎會增加更多問題。

我建議從th元素中刪除邊框並將邊框應用到表格外部的div。將邊框半徑添加到div和bamn，顯示邊框半徑。

來源

2014-10-31 17:32:59 shash7

你有你的邊界和邊界半徑放在錯誤的地方。

例如，如果您將此添加到您的CSS，你會發現你想要的效果：

#comp { 
border-radius: 10px; 
border: 2px solid #0092d7; 
}

希望有所幫助。

來源

2014-10-31 17:34:51 chdltest

-1

試試這個：

remove border-collapse:colapse;

在樣式表

，並設置

<table class="round-table" width="100%" style="border:3px solid red;">

來源

2014-10-31 17:55:45 Constantine

無法在WordPress中製作CSS圓角桌

回答

相關問題