My vision is to style a table "ASCII art" using CSS, like the example below:
+------+---------+----+
| 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>
If you're interested in creating tables like this, you can visit this table generator: Format Text As Table
If possible, I want to achieve this style using pure CSS without hardcoding any border characters.
My Experimentation
I attempted to use border-image but the outcome wasn't quite what I expected:
This is my CSS code:
* {
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:
The Result:
As clearly seen, the top and bottom borders are not visible. Moreover, there are no lines between the cells displayed.
When using border-width: 16px:
Now, the top and bottom borders are shown, however, the left and right borders are stretched.
Another downside of my approach is that the image does not adapt properly to changes in font size.