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

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

Answer 3

Your code is conflicting with bootstrap... try simplifying.

Here's an example without bootstrap and without that overly specific CSS on JSFiddle - once you know that works, you can start building up the complexity...

Bear in mind you may need to override certain Bootstrap CSS defaults, such as border-collapse etc. Also if those rules have higher CSS specificity than yours, they will take precedence over your rules.

Border image browser support can be found here .

Answer 4

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 5

Bootstrap.css definitions interfere with your css definition. In jsfiddle, when i remove bootstrap.css from external resources, everything works correctly.