Red Whale Red Whale - 6 months ago 9
HTML Question

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

Original Code



<html>
<head>
<style>
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;}
</style>
</head>
<body>
<table>
<tr>
<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>
</tr>
<tr>
<td class="t">Banana</td>
</tr>
<tr>
<td class="t">Cat</td>
</tr>
<tr>
<td class="t">Dog</td>
</tr>
<tr>
<td class="t">Elephant</td>
</tr>
<tr>
<td class="t">Frog</td>
</tr>
<tr>
<td class="t">Gorilla</td>
</tr>
<tr>
<td class="t">Hat</td>
</tr>
</table>

</body>
</html>


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?

Answer

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;
   line-height:100px;
   padding-top:50px;
}