Разделить элемент таблицы <td>на ВЛЕВО и ВПРАВО

Question

Какой лучший способ разбить элемент таблицы <td>? Я действительно не хочу использовать вложенные таблицы. Мне нужно, чтобы во внутреннем элементе было два элемента, один из которых выровнен по левому краю, а другой - по правому краю без рамки.

Например:

<table>
<tr>
<td>LEFT, RIGHT</td>
</tr>
</table>

есть ли другие способы сделать это, кроме следующего?

<table>
<tr>
<td>LEFT</td>
<td>RIGHT</td>
</tr>
</table>

Я хочу, чтобы внутренним элементом было <span> или что-то лучшее для этого.

Answer 1

<table>
   <tr>
      <td>
         <div style="float:left">LEFT</div><div style="float:right">RIGHT</div>
      </td>
   </tr>
</table>

Answer 2

Я бы сделал что-то вроде:

<td><div class="left>LEFT</div><div class="right">RIGHT</div></td>

тогда мой css будет выглядеть так:

td{position: relative;}
td .left{position: absolute; text-align: left; left: 0;}
td .right{position: absolute; text-align: right; right: 0;}

... или что-то в этом роде.

Answer 3

Вы можете сделать это так, хотя интервалы и деления намного лучше, imo.

<table width="100%">
 <tr width="100%">
  <td width="100%">
   <span style="float:left;">left</span>
   <span style="float:right;">right</span>
  </td>
 </tr>
</table>

Answer 4

Flexbox - правильный подход, поскольку теперь он поддерживается всеми основными браузерами. Это альтернативный подход, если вам нужно ориентироваться на старые браузеры или вам не нравятся недостатки поплавков. При таком подходе вы можете лучше контролировать переполнение левого и правого сегмента, а также легко добавлять центрированный сегмент, если он вам нужен.

CSS:

table{
  width: 100%;
}

.container{
  width: 100%;
  display: table;
}

.cell{
  display: table-cell;
}

.cell .left{
  text-align: left;
}

.cell.right{
  text-align: right;
}

HTML:

<table>
  <tr>
    <td>
      <div class="container">
        <span class="cell left">LEFT</span>
        <span class="cell right">RIGHT</span>
      </div>
    </td>
  </tr>
</table>

Answer 5

Поплавки, похоже, выглядели неправильно, поэтому я использовал flexbox:

https://jsfiddle.net/6rc8w709/

.td-content{
  display:flex;
}
.child{
  flex:1;
}
.right{
  text-align:right;
}

HTML:

<table>
  <tr>
    <td>
      <div class="td-content">
        <div class="child">
          LEFT
        </div>
        <div class="child right">
          RIGHT
        </div>
      </div>
    </td>
  </tr>
</table>