web-dev-qa-db-fra.com

DIV dans <td> float right

J'ai eu une table avec un couple <td>:

<table>
 <tr>
  <td>First</td>
  <td>Second</td>
  <td style="padding:20px;">
      <div>
        Third
      </div>
  </td>
 </tr>
</table>

Ce que je veux faire est de placer le "troisième" <td> (avec le div) à droite du tableau et les "premier" et "deuxième" <td> devraient rester à gauche.

Le style avec float:right; n'a pas fonctionné pour moi ...

htmlasp.netcss
10
Swag

Vous devez définir la largeur de votre table à 100%, puis contrôler la largeur de vos 2 premières colonnes et enfin aligner votre troisième colonne à droite. 

http://jsfiddle.net/25Mqa/1/

<table>
 <tr>
  <td class="first">First</td>
  <td class="second">Second</td>
  <td class="third">Third</td>
 </tr>
</table>

CSS:

table { width:100%; }
.first, .second { width:50px; }
.third { text-align:right; }
16
Tim Wasson

Le problème est que la largeur d'un <table> est déterminée par son contenu, par défaut. Si vous souhaitez que le <table> ait une largeur de 100% (de son bloc contenant) comme le font les éléments au niveau du bloc, vous pouvez soit ajouter table-layout: fixed;, puis spécifier votre largeur - ou simplement lui donner une largeur, en fonction de vos besoins, par exemple.

table {
   width: 100%;
}

http://jsfiddle.net/QEaAd/2/

6
Adrift

essayez d'ajouter style="text-align:right;"

<table>
 <tr>
  <td>First</td>
  <td>Second</td>
  <td style="padding:20px; text-align:right;">
      <div>
        Third
      </div>
  </td>
 </tr>
</table>

Seulement si vous avez 2 divs l'un près de l'autre:

<div id="fr">div1</div>
<div id="fr">div2</div>

vous pouvez les faire flotter à droite:

<style>
#fr{float:right;}
</style>
1
user2062658
<table style="width: 100%;">
 <tr>
  <td>First</td>
  <td>Second</td>
  <td style="padding:20px; display: block; float: right;">
      <div>
        Third
      </div>
  </td>
 </tr>
</table>

http://jsfiddle.net/pbesD/

Je crois que cela fait ce que vous voulez, mais si je comprends bien, les éléments de table flottante poseront des problèmes dans les versions d’Internet Explorer <8

0
user710031

Je ne sais pas ce que vous essayez de faire avec des tables et des divs? Mais je l'utilise normalement pour les emailers.

J'utilise l'attribut align pour les td. Cela aide beaucoup à faire en sorte que votre mise en page se présente comme vous le souhaitez. Et cela fonctionne dans tous les navigateurs :) 

VIOLON

HTML:

<table width="100%">
 <tr>
  <td>First</td>
  <td>Second</td>
  <td style="padding:20px;" align="right">
      <div>
        Third
      </div>
  </td>
 </tr>
</table>
0
designtocode