Question

我正在使用Bootstrap类“table”，我希望用图像替换默认边框。使用Bootstrap选择器，我可以隐藏默认边框并显示新边框（live preview）。当我尝试添加border-image时，它不会出现（live preview 2）。

我尝试过但没有帮助：

边界宽度
边界高度
border：5px solid transparent;边界图像
border-top：1px;
玩！imporant

表格代码，图片未显示：

<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/

Bootstrap表图像作为边框

1 个答案: