Style sheet as an ASCII-art table using CSS

Question

Using CSS, I want to fine-tune the "ASCII art" table, for example , for example:

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

For more information about these tables, check out this table generator: Text format as a table

If possible, it would be great to just use CSS rather than hard-code any of the border characters.

---

My attempt

I tried using border-image , but the results are not quite what I want:

My 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 :

Result:

As you can see, the upper and lower borders are not displayed. In addition, no rows are displayed between cells.

Using border-width: 16px :

The upper and lower borders are now displayed, but the left and right borders are stretched.

Another thing that I don't like about using my method is that the image does not respond to the font size.

Answer 1

Here is a CSS solution that uses pseudo elements. It works as follows:

• Additional item required; so we have enough pseudo-elements for single-row tables.
• Cell angles require an image.
• The image is placed in the upper left corner of all cells.
• The image is placed in the lower right corner of the right column and the bottom row of the row.
• The image is located in the upper right and lower left corners of the table.

Note: results are disabled by 1px in FireFox.

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