Geek Answers Handbook

Border Image Table Cell

I want to add a border image to the cells of the table, but it does not work ... or am I doing it wrong ... The width of the border is visible, but the 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 using border-image.com

Any ideas? Or is border-image just not supported for tables?

+4
source share
5 answers

You have included bootstrap.min.css, which overrides your CSS.

Try this script: https://jsfiddle.net/6025vyn9/

: , border-image ( ), , border-collapse collapse: http://www.w3.org/TR/css3-background/#the-border-image-source

+2

... .

CSS JSFiddle - , ...

, CSS Bootstrap, border-collapse .. , CSS, , .

.

+1

, div, divs, . 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>
Hide result
+1

Bootstrap.css css. jsfiddle, Bootstrap.css , .

+1

:

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

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

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

0

More articles:


All Articles