Looking to create a unique ascii chart using an old-school <table> as the canvas? Check out the striped design below:
https://i.sstatic.net/bE2m6.png
How can you move from left to right seamlessly on this table display? To achieve the optical illusion effect, ensure that the height of each table row matches the height of the characters to eliminate visible vertical spacing.
Tried adjusting CSS styles without success? Here's one example (provides the left result):
<table class="table-responsive table-condensed table-striped table-collapse">
<tr>
<td class='row-mini'><div class='div-mini'><code>______┌🕖 </code></div></td></tr>
<tr>
<td class='row-mini'><div class='div-mini'><code>______│</code></div></td></tr>
<tr>
<td class='row-mini'><div class='div-mini'><code>____┌─┤</code></div></td></tr>
<tr>
<td class='row-mini'><div class='div-mini'><code>____│ ⋮</code></div></td></tr>
</table>
Don't forget to apply these CSS properties:
.row-mini {
padding:0px; margin:0;
}
.div-mini {
height: 10 px;
overflow: hidden;
}