html - 对齐表格 html 中的文本

Question

我有 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

谢谢

Answer 1

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

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>