对齐表格 html 中的文本答案

【问题标题】：Align text in table html对齐表格 html 中的文本
【发布时间】：2019-02-21 20:12:21
【问题描述】：

我有桌子：

<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 在价格一词下，小时和日在 Einheit 一词下。我尝试使用 width 属性和 text-align 来做到这一点，但它不起作用。

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

谢谢

【问题讨论】：

标签： html css html-table

【解决方案1】：

默认span标签是内联元素，它不需要宽度。您需要使用display 或float 将span 标签更改为块标签元素。检查下面更新的 sn-p...

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>

【讨论】：

【解决方案2】：

添加这个 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>

【讨论】：

对我来说似乎是一个不错且干净的解决方案。尽管第 4、6 等列也将居中。要仅将第二列居中，请使用 table tr td:nth-child(2){ text-align:center; }

【解决方案3】：

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

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

因此，为了对齐其下方的单元格，您只需编写代码 td style=" text-align:center"

如果你想将所有单元格对齐到中心

表格样式="text-align:center"

【讨论】：