使用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解决方案.它的工作原理如下：
>需要额外的元素;这样我们就可以为一行表提供足够的伪元素.
>单元格角需要图像.
>图像位于所有单元格的左上角.
>图像位于右列和底行单元格的右下角.
>图像位于表格的右上角和左下角.
注意：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,.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,.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,.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,.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>
