Question

我想将边框图像添加到表格单元格中，但它不起作用......或者我做错了......边框宽度可见，但图像丢失了。我的jsFiddle是here，代码：

.table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th,  .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
    border: 0; /* reset */
    border-color: transparent;
    border-style: solid;
    border-width: 27px;
    border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 fill repeat;
}

使用border-image.com

生成边框图像代码

有什么想法吗？或者只是表格不支持border-image？

Answer 1

您已经包含了覆盖CSS的bootstrap.min.css。

请尝试这个小提琴：https://jsfiddle.net/6025vyn9/

修改：为了澄清，border-image适用于表格（表格外部）但在border-collapse为{{collapse时不适用于内部表格元素1}}：http://www.w3.org/TR/css3-background/#the-border-image-source

Answer 2

您的代码与bootstrap冲突...尝试简化。

这是一个没有引导程序的示例，并且在JSFiddle上没有过于特定的CSS - 一旦你知道它有效，你就可以开始构建复杂性......

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

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

Answer 3

如何忘记对表进行样式设置并在div中包装元素，然后像下面的代码片段那样设置div的样式。然后只需使用table td:not:(:last-of-type), table th:not(:last-of-type)和table tr:not(:last-of-type)等内容进行调整，即可通过设置特定的边框来删除出现的双边框

.table-bordered div {
    text-align: center;
    padding:10px;
    border-color: transparent;
    border-style: solid;
    border-width: 27px;
    -moz-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat;
    -webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat;
    -o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat;
    border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 fill repeat;
}
.table-bordered * {
    border: 0;
}

<table class="table-bordered" cellspacing=0 cellpadding=0>
    <thead>
        <tr>
            <th>
                <div>Foo</div>
            </th>
            <th>
                <div>Bar</div>
            </th>
            <th>
                <div>Lols</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div>something here</div>
            </td>
            <td>
                <div>whatever</div>
            </td>
            <td>
                <div>6,0% / 12% wag.</div>
            </td>
        </tr>
    </tbody>
</table>

Answer 4

Bootstrap.css定义会干扰您的css定义。在jsfiddle中，当我从外部资源中删除bootstrap.css时，一切正常。

Answer 5

你必须像这样分开表格边框：

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

https://jsfiddle.net/2y3xqq0q/5/

http://www.w3.org/TR/CSS2/tables.html#borders

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

5 个答案: