Выровнять текст в таблице HTML

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>

Нужно, чтобы 1000 и 250.50 были под словом Цена, Час и День были под словом Эйнхайт.Я попытался сделать это, используя свойство width и text-align, но это не работает.

Нужен этот результат, например: https://clip2net.com/s/3ZXsphT

Спасибо

Answer 1

На самом деле, вам не нужен ни один интервал, поскольку ни один из них не был выполнен.

цена / Einheit была центрирована только, так как это значение по умолчанию для тега th

Итак, чтобы выровнятьячейку под ней, вы можете просто кодировать td style = "text-align: center"

и если вы хотите выровнять все ячейки по центру

table style = "text-align: center"

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

Поскольку отрезки являются встроенными элементами, вам нужно будет создать отрезок как блочные элементы на одной строке, или вы можете просто использовать 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>