Set table rows height to character height

Question

I want to use a good ol' <table> as a striped "canvas" to draw an ascii chart ... Erm. like this:

How can I go from left to right ? For the optic illusion to work, I need the table rows height to equals char heights so there is no visible vertical space between chars.

I have tried following css tweaking with no success (this code gives 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>

with css:

.row-mini {
    padding:0px; margin:0;
}
.div-mini {
   height: 10 px; 
   overflow: hidden;
}

Answer 1

您可以使用没有边框间距的行高，并删除表压缩类

<强>演示

http://jsfiddle.net/81wu4cp8/

<强> HTML

 <table class="table-responsive 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>

<强>的CSS

.row-mini {
    padding:0px; margin:0;
}
.div-mini {
   line-height: 11px; 
   overflow: hidden;
}
table {
  border-spacing: 0px;
}

<强>结果