Diviser un <td> élément de la table à GAUCHE et à DROITE justifié

Quel est le meilleur moyen de diviser un élément de tableau <td>? Je n'ai pas vraiment envie d'utiliser des tables imbriquées. J'ai besoin de l'élément interne de disposer de deux éléments l'un qui est justifié à gauche et les autres à être justifié à droite avec pas de frontière.

Par exemple:

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

toutes les autres façons de le faire en plus de la suite?

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

Je veux l'élément interne à un <span> ou tout ce qui est la meilleure pour cette.

avez-vous essayé deux span's ou deux divs's
Ne pouvais pas d'accord avec Michael plus, les travées et les divs sont la voie à suivre lorsque vous faites de fantaisie de positionnement.
J'ai finalement mis en œuvre des ce avec les deux <span> blocs.

OriginalL'auteur htmlfarmer | 2012-03-08

6
```
<table>
   <tr>
      <td>
         <div style="float:left">LEFT</div><div style="float:right">RIGHT</div>
      </td>
   </tr>
</table>
```
Ce n'est pas une bonne chose à faire. Il ne faut pas incorporer des données de style dans le HTML; c'est à peu près désapprouvée à ce point.
L'incorporation de styles est toujours nécessaire lors de l'utilisation des e-mails parce que la plupart des clients dépouiller le <head> et <style> tags

OriginalL'auteur operation1053
2

Je ferais quelque chose comme:
```
<td><div class="left>LEFT</div><div class="right">RIGHT</div></td>
```
puis mon css devrait ressembler à:
```
td{position: relative;}
td .left{position: absolute; text-align: left; left: 0;}
td .right{position: absolute; text-align: right; right: 0;}
```
... ou quelque chose le long de ces lignes.

Est-il préférable d'utiliser <span> je ne veux pas les retours à la ligne.
Les retours à la ligne ne sont pas inhérents à la vrd, en particulier lorsque vous êtes à l'aide de positionnement absolu. Vous ne devriez avoir aucun problème.
Cela a fonctionné pour moi, mais j'ai trouvé que je devais avoir top:0 dans les deux .left et .right sinon la position verticale.

OriginalL'auteur Jeremy Holovacs

Vous pourriez le faire comme cela, même si les travées et les divs sont beaucoup mieux 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>

OriginalL'auteur Travis J

Les flotteurs ne semblent pas de regarder à droite, j'ai donc utilisé 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>

OriginalL'auteur user3413723

0

Flexbox est la bonne approche, car il est maintenant pris en charge par tous les principaux navigateurs. C'est une approche alternative si vous avez besoin de cibler un vieux navigateurs ou vous n'aimez pas les inconvénients de la flotte. Avec cette approche, vous pouvez contrôler le débordement de la gauche et la droite segment mieux et vous pouvez facilement ajouter un segment centré si vous en avez besoin.

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>
```
OriginalL'auteur Benjamin Pajk

Vous devez vous connecter pour publier un commentaire.