gpt4 book ai didi

html - 如何使每个
在 rowspan 中以相等的间距对齐?

转载 作者:行者123 更新时间:2023-11-28 05:47:03 24 4
gpt4 key购买 nike

原始代码

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

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com