Html 带边框图像的表格单元格

Html 带边框图像的表格单元格,html,css,Html,Css,我想将边框图像添加到表格单元格,但它不起作用…或者我做错了。。。边框宽度可见,但缺少图像。我的JSFIDLE是,代码: 边框图像代码是用 有什么想法吗?或者表不支持边框图像?您已经包括bootstrap.min.css,它将覆盖您的css 试试这把小提琴吧: 编辑:为了澄清,边框图像适用于表(表的外部),但不适用于内部表元素,当边框折叠为折叠时:您必须像这样分开表边框: .table-bordered { border-collapse:separate; } 您的代码与引导冲突。

我想将边框图像添加到表格单元格,但它不起作用…或者我做错了。。。边框宽度可见,但缺少图像。我的JSFIDLE是,代码:

边框图像代码是用


有什么想法吗?或者表不支持边框图像?

您已经包括bootstrap.min.css,它将覆盖您的css

试试这把小提琴吧:


编辑:为了澄清,
边框图像
适用于表(表的外部),但不适用于内部表元素,当
边框折叠
折叠时:

您必须像这样分开表边框:

.table-bordered  {
    border-collapse:separate;
}


您的代码与引导冲突。。。试着简化一下

这里是一个没有引导的例子,没有过度特定的CSS,一旦你知道这是可行的,你就可以开始建立复杂性

请记住,您可能需要覆盖某些引导CSS默认值,例如
边框折叠
等。此外,如果这些规则具有比您更高的CSS特性,它们将优先于您的规则


可以找到边框图像浏览器支持。

忘记设置表格样式,改为在div中换行元素,然后像下面的代码片段那样设置div样式怎么样。然后用
table td:not:(:type的最后一个)、table th:not(:type的最后一个)
table tr:not(:type的最后一个)
之类的东西来调整它,通过设置要显示的特定边框边来删除显示的双边框

。表格边框div{
文本对齐:居中;
填充:10px;
边框颜色:透明;
边框样式:实心;
边框宽度:27px;
-moz边框图像:url(http://www.w3.org/TR/css3-background/border.png)重复27次;
-webkit边框图像:url(http://www.w3.org/TR/css3-background/border.png)重复27次;
-o-border-image:url(http://www.w3.org/TR/css3-background/border.png)重复27次;
边框图像:url(http://www.w3.org/TR/css3-background/border.png)27填充重复;
}
.带边框的桌子*{
边界:0;
}

福
酒吧
笑
这里有东西
无论什么
6,0%/12%wag。

引导。css
定义会干扰您的css定义。在JSFIDLE中,当我从外部资源中删除
bootstrap.css
时,一切都正常工作。

它是受支持的,但不清楚它到底应该是什么样子谢谢但是为什么当我尝试折叠边框时,图像会像这样消失?谢谢,但这里是一样的:为什么当我尝试折叠边框时,图像会像这样消失?通过折叠边框,你告诉浏览器根本不要渲染边框。如果您试图在表的外部放置边框,那么这应该会起作用(即仅将样式应用于表):请注意,当“边框折叠”是“折叠”时,边框图像不适用于内部表元素:不客气,希望您可以通过另一个解决方案(如果不是使用我的解决方案)解决此问题
.table-bordered  {
    border-collapse:separate;
}