html - Bootstrap 表格图像作为边框

标签 html css twitter-bootstrap

<分区>

我正在使用 Bootstrap 类 “table”,我想用图像替换默认边框。使用 Bootstrap 选择器,我可以隐藏默认边框并显示新边框 ( live preview )。当我尝试添加边框图像时,它没有出现 ( live preview 2 )。

我尝试过但没有帮助:

  • 边框宽度
  • 边框高度
  • 边框:5px实心透明;边框图片
  • 上边框:1px;
  • 玩 !important

表格代码,其中未显示图像:

<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;
}

最佳答案

您可以将 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/

关于html - Bootstrap 表格图像作为边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35329978/

相关文章:

html - 元素和侧面之间的中心 DIV?

javascript - 居中缩放元素超出窗口宽度和高度

html - 表单输入未使用 Bootstrap 4 排列

html - 使用 bootstraps 创建的 Navbar 左右都有空白

html - 选择复选框而不是勾选符号后在 html 中需要 X

javascript - 通过 jQuery 显示/隐藏 <li>

html - 使用 CSS 实现淡入/淡出效果

html - 奇怪的 CSS 媒体查询逻辑

html - 在我的 html 页面底部居中放置下一个和上一个按钮

javascript - 无法覆盖 Bootstrap Popover 隐藏