html – 使用CSS将样式表作为ASCII艺术表

概述使用CSS,我想设置一个表格“ASCII艺术”,如下所示： +------+---------+----+| Jill | Smith | 50 |+------+---------+----+| Eve | Jackson | 94 |+------+---------+----+| John | Doe | 80 |+------+---------+----+ <t 使用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 >    <table>        <tr>            <td>Jill</td><td>Smith</td><td>50</td>        </tr>    </table></div><div >    <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 >    <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艺术表全部内容，希望文章能够帮你解决html – 使用CSS将样式表作为ASCII艺术表所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。