Установить высоту стола до высоты символа

Question

Я хочу использовать хороший ol '<table> как полосатый «холст», чтобы нарисовать диаграмму ascii ... Erm. как это:

Как я могу перейти от оставил в право? Для оптической иллюзии для работы мне нужно, чтобы высота строк таблицы равнялась высоте символов, поэтому между символами нет видимого вертикального пространства.

Я попытался следующие CSS тонкой настройки без успеха (этот код дает оставил результат):

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

с 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; 
} 

Результат