使用CSS将样式表转换为ASCII艺术表格

Question

使用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>

如果你想了解这些表格的更多信息，请查看此表格生成器：格式化文本为表格

如果可以的话，只使用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:

现在，顶部和底部边框已经显示，但是左右边框被拉伸了。

我不喜欢使用这种方法的另一个原因是该图片无法正确响应字体大小的变化。

- Frithjof

Answer 1

这里是一种使用伪元素的CSS解决方案。其工作原理如下：

• 需要一个额外的元素，以便我们有足够的伪元素用于单行表格。
• 需要一个图片来表示单元格的角落。
• 将图片定位在所有单元格的左上角。
• 将图片定位在右列和底部行单元格的右下角。
• 将图片定位在表的左上角和右下角。

注意：在FireFox中，结果会偏移1个像素。

.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>

- Salman A