给出此代码以在单元格周围制作边框图像。是否可以让单元格之间的边框只显示一个边框?而且红色方 block 只出现在 table 的 Angular 落,而不是单元格的每个 Angular 落。 (就像会显示普通表格一样,但线条会被正方形图像替换)
如果存在使用外部库或 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>
最佳答案
你可能看起来像这样。
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>
关于html - 带边框图片的表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58007425/