Question

我阅读了相关的帖子，但没有一个能解决我的问题。

我的WordPress网站中嵌入了一个表格，我只带走标题菜单和页脚，可以从http://www.solepropr.net/demo/wordpress_table.html访问演示网站

如果查看第一个边框的CSS设置，则border-top-left-radius为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;

Answer 1

添加 CSS 属性border-collapse: separate，例如.round-table类

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

Answer 2

您的边框和边框半径位于错误的位置。

例如，如果您将此添加到CSS中，您会注意到您想要的效果：

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

希望有所帮助。

Answer 3

显然，您无法在第34个边框内设置border-radius属性。解决方案是将显示更改为内联块。但是，这似乎会增加更多问题。

我建议从第th个元素中删除边框并将边框应用到表格外的div。将border-radius添加到div和bamn，显示边界半径。

Answer 4

试试这个：

remove border-collapse:colapse;

样式表中的

并设置

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

无法在WordPress中制作CSS圆角表

4 个答案: