使用 CSS,我想为表格“ASCII 艺术”设置样式,例如这个:
+------+---------+----+
| Jill | Smith | 50 |
+------+---------+----+
| Eve | Jackson | 94 |
+------+---------+----+
| John | Doe | 80 |
+------+---------+----+
<table>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
有关这些表的更多信息,请查看此表生成器:Format Text As Table
如果可能的话,只使用 CSS 而不是对任何边框字符进行硬编码会很酷。
我的尝试
我试过使用border-image
,但结果不是我想要的:
我的 CSS:
* {
font-family: "Ubuntu Mono";
size: 10px;
padding: 0;
margin: 0;
}
table {
border-spacing: 0;
border-width: 8px;
border-image: url("border.png") 16 8 round;
}
border.png
:
结果:
如您所见,顶部和底部边框未显示。此外,不会显示单元格之间的任何线条。
使用border-width: 16px
:
现在,显示了上下边框,但左右边框被拉长了。
我不喜欢使用我的方法的另一件事是图像无法正确响应字体大小。
最佳答案
这是一个使用伪元素的 CSS 解决方案。它的工作原理如下:
- 需要一个额外的元素;这样我们就有足够的单行表伪元素。
- 单元 Angular 需要一张图片。
- 图像位于所有单元格的左上角。
- 图像位于右列和底行单元格的右下角。
- 图片位于表格的右上角和左下角。
注意:在 FireFox 中结果有 1px 的误差。
.ascii-table {
font: medium/1 monospace;
margin: 1em;
display: inline-block;
position: relative;
}
.ascii-table table {
border-collapse: collapse;
}
.ascii-table td {
border: 1px dashed #000;
padding: .5em;
position: relative;
}
.ascii-table tr td:before {
position: absolute;
width: 15px;
height: 15px;
content: "";
background-image: url(http://i.stack.imgur.com/2OGdZ.png);
background-color: rgba(255, 127, 0, .4);
top: -8px;
left: -8px;
}
.ascii-table tr td:last-child:after, .ascii-table tr:last-child td:after {
position: absolute;
width: 15px;
height: 15px;
content: "";
background-image: url(http://i.stack.imgur.com/2OGdZ.png);
background-color: rgba(255, 63, 63, .4);
bottom: -8px;
right: -8px;
}
.ascii-table:before {
position: absolute;
width: 15px;
height: 15px;
content: "";
background-image: url(http://i.stack.imgur.com/2OGdZ.png);
background-color: rgba(255, 127, 0, .8);
top: -7px;
right: -7px;
}
.ascii-table:after {
position: absolute;
width: 15px;
height: 15px;
content: "";
background-image: url(http://i.stack.imgur.com/2OGdZ.png);
background-color: rgba(255, 63, 63, .8);
bottom: -7px;
left: -7px;
}
<div class="ascii-table">
<table>
<tr>
<td>Jill</td><td>Smith</td><td>50</td>
</tr>
</table>
</div>
<div class="ascii-table">
<table>
<tr>
<td>Jill</td><td>Smith</td><td>50</td>
</tr>
<tr>
<td>Eve</td><td>Jackson</td><td>94</td>
</tr>
</table>
</div>
<div class="ascii-table">
<table>
<tr>
<td>Jill</td><td>Smith</td><td>50</td>
</tr>
<tr>
<td>Eve</td><td>Jackson</td><td>94</td>
</tr>
<tr>
<td>John</td><td>Doe</td><td>75</td>
</tr>
</table>
</div>
关于html - 使用 CSS 将表样式设置为 ASCII 艺术表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26342182/