Выравнивание по правому и по левому краю текста в той же ячейке таблицы HTML

Question

У меня есть ячейка в HTML <table>. Я хотел бы, чтобы часть содержимого ячейки была выровнена по правому краю, а часть - по правому краю. Возможно ли это?

Answer 1

Если вы хотите, чтобы они были разделены, делайте то, что сказал Балон. Если вы хотите, чтобы они были в одной строке, выполните:

<td>
  <div style="float:left;width:50%;">this is left</div>
  <div style="float:right;width:50%;">this is right</div>
</td>

Answer 2

Я придумал это, пытаясь понять, как отображать валюту ('$' слева, число справа) в ячейках таблицы:

<div class="currency">20.34</div>

.currency {
   text-align: right;
}

.currency:before {
   content: "$";
   float: left;
   padding-right: 4px;
}

Answer 3

Это возможно, но как зависит от того, что вы пытаетесь достичь. Если это так:

| По левому краю по правому краю | в одной ячейке вы можете использовать плавающие div внутри тега td:

<td>
<div style='float: left; text-align: left'>Left-aligned</div>
<div style='float: right; text-align: right'>Right-aligned</div>
</td>

Если это | По левому краю
Выравнивание по правому краю |

Тогда решение Балона верное.

Если это: | Выровненный по левому краю | Выравнивание по правому краю |

Тогда это:

<td align="left">Left-aligned</td>
<td align="right">Right-Aligned</td>

Answer 4

Ответ Tor Valamo с небольшим вкладом с моей стороны: используйте атрибут "nowrap" в элементе "td", и вы можете удалить спецификацию "width". Надеюсь, это поможет.

<td nowrap>
  <div style="float:left;">this is left</div>
  <div style="float:right;">this is right</div>
</td>

Answer 5

Вы имеете в виду, как это?

<!-- ... --->
<td>
   this text should be left justified
   and this text should be right justified?
</td>
<!-- ... --->

Если да

<!-- ... --->
<td>
   <p style="text-align: left;">this text should be left justified</p>
   <p style="text-align: right;">and this text should be right justified?</p>
</td>
<!-- ... --->

Answer 6

Стиль

td не обязателен, но он облегчит просмотр этого примера в браузере

<table>
 <tr>
  <td style="border: 1px solid black; width: 200px;">
  <div style="width: 50%; float: left; text-align: left;">left</div>
  <div style="width: 50%; float: left; text-align: right;">right</div>
  </td>
 </tr>
</table>

Answer 7

Вы можете использовать что-то вроде:

<td> 
  <div style="float:left;width:49%;text-align:left;">this is left</div> 
  <div style="float:right;width:49%;text-align:right;">this is right</div> 
</td>

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * "1004 *" - дать рендереру место, чтобы все обернуть вокруг него. "

"

И вы можете использовать либо <div>, либо <span>

Answer 8

конечно, но вам нужно обернуть эти «блоки» в отдельные теги и применить выравнивание к ним.