Загрузочный стол изображения как граница

Question

Я использую Bootstrap class «table», и я хочу заменить границы по умолчанию изображением. С помощью селекторов Bootstrap я могу скрыть границы по умолчанию и показать новые границы (live preview). Когда я пытаюсь добавить border-изображение, оно не появляется (live preview 2).

Что я tryied и это не помогло:

• граница ширины
• границы высота
• граница: 5px твердый прозрачный; border-image
• border-top: 1px;
• Игра с Тон задает

Код таблицы, где изображение не показывает:

<table class="table"> 
    <thead> 
    <tr> 
     <th width="16,666%">First</th> 
     <th width="33,333%">Second</th> 
     <th width="16,666%">Third</th> 
     <th width="16,666%">Fourth</th> 
     <th width="16,666%">Fifth</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Lorem</td> 
     <td>Ipsum</td> 
     <td>Dolor</td> 
     <td>Sit</td> 
     <td>Amet</td> 
    </tr> 
    <tr> 
     <td>Lorem</td> 
     <td>Ipsum</td> 
     <td>Dolor</td> 
     <td>Sit</td> 
     <td>Amet</td> 
    </tr> 
<tbody> 
</table> 

CSS:

.table > thead > tr > th, 
.table > tbody > tr > th, 
.table > tfoot > tr > th, 
.table > thead > tr > td, 
.table > tbody > tr > td, 
.table > tfoot > tr > td { 
    border: none; 
    border-image: url('http://s24.postimg.org/4j8lmprz9/border.png') !important; 
} 

.table > thead > tr > th { 
    border: none; 
    border-image: url('http://s24.postimg.org/4j8lmprz9/border.png') !important; 
} 

Answer 1

Вы можете применить border-image к div элемента, но не с table, вы можете добавить дополнение к основному классу .table и применить background-image в него.

Вы можете обновить CSS как:

.table{ 
    border-spacing: 4px; 
    border-collapse: separate; 
    background-image: url('http://s24.postimg.org/4j8lmprz9/border.png'); 
    background-size: 100% auto; 
    background-position: center; 
    background-repeat: repeat; 
} 
.table > thead > tr > th, 
.table > tbody > tr > th, 
.table > tfoot > tr > th, 
.table > thead > tr > td, 
.table > tbody > tr > td, 
.table > tfoot > tr > td { 
    border: none; 
    background-color: #fff; 
} 
.table > thead > tr > th { 
    border: none; 
    border-bottom: 1px solid red; 
    background-color: #fff; 
} 

jsfiddle: https://jsfiddle.net/8tjsq0gz/