gpt4 book ai didi

html - 对齐表格 html 中的文本

转载 作者:行者123 更新时间:2023-11-28 00:22:47 25 4
gpt4 key购买 nike

我有 table :

<table border="1" width="100%">
<thead>
<tr>
<th width="50%">Name</th>
<th width="50%"><span style="width: 50%;text-align: left;">Price</span> / <span style="width: 50%;text-align: right;">Einheit</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td><span style="width: 50%;text-align: left;">1000</span> / <span style="width: 50%;text-align: right;">Hour</span></td>
</tr>
<tr>
<td>Name2</td>
<td><span style="width: 50%;text-align: left;">250.50</span> / <span style="width: 50%;text-align: right;">Day</span></td>
</tr>
</tbody>
</table>

需要 1000 和 250.50 在“价格”一词下,“小时”和“日期”在“永恒”一词下。我尝试使用 width 属性和 text-align 来做到这一点,但它不起作用。

需要这个结果,例如: https://clip2net.com/s/3ZXsphT

谢谢

最佳答案

默认 span 标签是行内元素,不占用宽度。您需要更改 span 标记以使用 displayfloat 阻止标签元素。检查下面更新的片段...

td span {
display: inline-block;
width: 47%;
}
<table border="1" width="100%">
<thead>
<tr>
<th width="50%">Name</th>
<th width="50%"><span style="width: 50%;text-align: left;">Price</span> / <span style="width: 50%;text-align: right;">Einheit</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td><span style="text-align: right;">1000</span> / <span style="text-align: left;">Hour</span></td>
</tr>
<tr>
<td>Name2</td>
<td><span style="text-align: right;">250.50</span> / <span style="text-align: left;">Day</span></td>
</tr>
</tbody>

关于html - 对齐表格 html 中的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54800996/

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