原始代码
<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>
输出屏幕
左边的列有很多数字。我希望这些数字可以在相等的间距内证明是合理的。也就是希望每个数字都能对齐右边的每条水平网格线。就像下图一样:
我该怎么办？
最佳答案
我建议使用 line-height 和 padding-top。但是，由于浏览器的默认样式，您必须确保 td 和 table 没有额外的 cellpadding 和 cellspacing，因此计算出的单元格高度准确为 100px。
td.m {
text-align: center;
line-height:100px;
padding-top:50px;
}
关于html - 如何使每个 <div> 在 rowspan <tr> 中以相等的间距对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37545652/