Red Whale Red Whale - 4 months ago 5x
HTML Question

How to make each <div> justify in an equal spacing in rowspan <tr>?

Original Code

table {border: 1px solid #000; border-collapse: collapse; }
th, td {border: 1px solid #000; }
td.m{text-align: center;}
td.t{width: 100px; text-align: center;}
<td rowspan="8" class="m"><div>0</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div></td>
<td class="t">Apple</td>
<td class="t">Banana</td>
<td class="t">Cat</td>
<td class="t">Dog</td>
<td class="t">Elephant</td>
<td class="t">Frog</td>
<td class="t">Gorilla</td>
<td class="t">Hat</td>


Output screen

There are many numbers at the left columns. And I hope those numbers can justify in an equal spacing. That is, I hope each number can align to each horizontal grid line on the right. Just like the image below:

How can I do?


I suggest line-height with padding-top. However you have to make sure that td and table has no extra cellpadding and cellspacing due to default styles of browser and so the computed height of cell is exact 100px.

td.m {
   text-align: center;