table cell with border-image

Question

I want to add border image to table cells, but it doesn't work ...or I'm doing sth wrong... Border width is visible, but image is missing. My jsFiddle is here, code:

.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 code is generated with border-image.com

Any ideas? Or border-image is simply unsupported for tables?

Answer 1

You've included bootstrap.min.css which is overriding your CSS.

Try this fiddle instead: https://jsfiddle.net/6025vyn9/

Edit: To clarify, border-image applies to tables (the outside of the table) but doesn't apply to internal table elements when border-collapse is collapse: http://www.w3.org/TR/css3-background/#the-border-image-source

Answer 2

What about forgetting about styling the table and wrap elements in divs instead and then styling the divs like the snippet below. Then just tweak it with something like table td:not:(:last-of-type), table th:not(:last-of-type) and table tr:not(:last-of-type) to remove the double borders that appear by setting specific border sides to appear

.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 3

You have to separate the table border like this:

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

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

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