Question

我有桌子：

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

需要在价格，小时和日期两个单词下的Einheit下分别是1000和250.50。我尝试使用width属性和text-align做到这一点，但它不起作用。

需要此结果，例如： https://clip2net.com/s/3ZXsphT

谢谢

Answer 1

由于跨度是内联元素，因此您需要将跨度作为同一行上的块元素，或者您可以将div与floats一起使用。

还纠正了对齐方式，并在第一个跨度中移动了/。

span {
  float: left;
}

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

Answer 2

默认情况下，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>

Answer 3

添加此CSS

table tr td:nth-child(even){
text-align:center;
}

<table border="1" width="100%">
  <thead>
    <tr>
      <th width="50%">Name</th>
      <th width="50%"><span>Price</span> / <span>Einheit</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Name1</td>
      <td><span>1000</span> / <span>Hour</span></td>
    </tr>
    <tr>
      <td>Name2</td>
      <td><span>250.50</span> / <span>Day</span></td>
    </tr>
  </tbody>
</table>

Answer 4

实际上，您不需要任何跨度，因为没有执行任何跨度。

price / Einheit仅居中，因为这是标签的默认值

因此，为了对齐其下方的单元格，您只需编写 td style =“ text-align：center”

，如果要将所有单元格都对准中心

表格样式=“ text-align：center”

在表格html中对齐文本

4 个答案: