时间戳

首页 > 解决方案 > 带边框图像的表格

html - 带边框图像的表格

问题描述

提供此代码以在单元格周围制作边框图像。是否可以让单元格之间的边框只显示一个边框？而且红色方块只在桌子的角落，而不是在单元格的每个角落。（就像显示普通表格一样，但线条被正方形图像替换）

如果存在使用外部库或 jquery 的解决方案，请告诉我。

.table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
    border: 0; /* reset */
    border-color: transparent;
    border-style: solid;
    border-width: 25px;
    -moz-border-image: url(https://www.w3schools.com/cssref/border.png) 27 round;
    -webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 27 round;
    -o-border-image: url(https://www.w3schools.com/cssref/border.png) 27 round;
    border-image: url(https://www.w3schools.com/cssref/border.png) 27 fill round;
}
<table class="table table-bordered">
    <thead>
        <tr>
            <th>Foo</th>
            <th>Bar</th>
            <th>Lols</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                something here
            </td>
            
            <td>
                whatever
            </td>
            
            <td>
                6,0% / 12% wag.
            </td>
        </tr>
    </tbody>
</table>

标签： htmlcsshtml-table

解决方案

你可能看起来像这样。

td,
th {
  border: 0;
  border-color: transparent;
  border-style: solid;
  -moz-border-image: url(https://www.w3schools.com/cssref/border.png) 27 round;
  -webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 27 round;
  -o-border-image: url(https://www.w3schools.com/cssref/border.png) 27 round;
  border-image: url(https://www.w3schools.com/cssref/border.png) 27 fill round;
  border-width: 0 0 25px;
}


.table {
  border: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 25px;
  -moz-border-image: url(https://www.w3schools.com/cssref/border.png) 27 round;
  -webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 27 round;
  -o-border-image: url(https://www.w3schools.com/cssref/border.png) 27 round;
  border-image: url(https://www.w3schools.com/cssref/border.png) 27 fill round;
}
<table class="table table-bordered">
  <thead>
    <tr>
      <th>Foo</th>
      <th>Bar</th>
      <th>Lols</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        something here
      </td>

      <td>
        whatever
      </td>

      <td># 6,0% / 12% wag.
      </td>
    </tr>
  </tbody>
</table>

推荐阅读