Comment puis-je positionner un SPAN pour être aligné de chaque côté et au-dessus d'une table?

Question

<div>
<span>left</span>
<span>right</span>
<!-- new line break, so no more content on that line -->
<table> 
...
</table>
</div>

Comment puis-je positionner ces étendues (elles peuvent être modifiées en n'importe quel élément) de sorte que, en fonction de la taille de la table (non définie nulle part, et ne devrait pas l'être), les étendues sont positionnées juste au-dessus du côté gauche de la table la table et le côté droit de la table.

Exemple:

a    b
table0
table1
table2

(où a est l'étendue gauche et b est l'étendue droite)

P.S. Vous pouvez changer n'importe quoi sauf la table interne html.

Answer 1

  

Ne les place pas relativement, ni   la réponse de Rob Allen, ils les ont mis   non loin du navigateur,   dans la largeur de la table.

Ils vont être liés par la largeur de leur conteneur et la réponse de Rob rend la largeur de la table et du conteneur de 100%.

La seule solution à laquelle je puisse penser est de mettre une rangée dans votre tableau avec une seule colonne (couvrant toutes les colonnes) et d'avoir dans cette rangée vos DIV flottantes.

Answer 2

<style type="text/css">
    #wrapper, #top, #tableArea
     {
       width: 100%;
       padding: 10px;
       margin: 0px auto;
      }

     #top
      {
        padding: 0px;
      }

      #leftBox, #rightBox
      {
          margin: 0px;
          float: left;
          display: inline;
          clear: none;
       }

       #rightBox
        {
            float: right;
        }
     </style>
<div id="wrapper">
    <div id="top">
        <div id="leftBox">A</div>
        <div id="rightBox">b<</div>
    </div>
    <div id="tableArea">
        <table> ... </table>
    </div>
</div>

Answer 3

J'ai rencontré un problème similaire et j'ai trouvé une solution. Cela ne dépend pas de la largeur de la table mais c'est un peu plus compliqué. Cela fonctionne dans tous les navigateurs, y compris IE5.5, IE6 et plus récent.

  <style>
  .tablediv {
  float:left; /* this is a must otherwise the div will take a full width of our page and this way it wraps only our content (so only the table)   */
  position:relative; /* we are setting this to start the trickie part */  
  padding-top:2.7em; /* we have to set the room for our spans, 2.7em is enough for two rows otherwise try to use something else; for one row e.g. 1.7em */
  }
  .leftspan {
  position:absolute; /* seting this to our spans will start our behaviour */
  top:0; /* we are setting the position where it will be placed inside the .tablediv */
  left:0;
  }
  .rightspan {
  position:absolute; 
  top:0; 
  right:0; 
  }
  </style>
<div class="tablediv">
 <span class="leftspan">Left text</span>
 <span class="rightspan">Right text <br /> with row</span>
  <table border="1">
   <tr><td colspan="3">Header</td></tr>
   <tr><td rowspan="2">Left content</td><td>Content</td><td rowspan="2">Right content</td></tr>
   <tr><td>Bottom content</td></tr>
  </table>
</div>
 <!-- If you don't want to float this on the right side of the table than you must use the clear style -->
 <p style="clear:both">
  something that continues under our tablediv
 </p>

Si vous ne pouvez pas utiliser un float pour une raison quelconque, vous pouvez utiliser un style alternatif .tablediv que j'ai trouvé par erreur. Il suffit de remplacer le float: left; afficher: inline-block; Ceci fonctionne dans tous les navigateurs modernes, mais pas dans IE7 et les versions antérieures.

Maintenant, vous comprenez ce que je veux dire et je suis sûr que vous trouverez d’autres solutions. N'oubliez pas que le .tablediv sera aussi long que le contenu interne. Donc, placer un paragraphe dedans entraînera une taille plus grande que notre table.

Answer 4

Si vous avez des divs au lieu de span, essayez float: left pour span a et float: right pour span b

Answer 5

<div>
<div style="float:left">a</div><div style="float:right">b</div>
<br style="clear: both">
aaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
</div>

Ne les place pas relativement, pas plus que la réponse de Rob Allen, ils les placent aux confins du navigateur, pas dans la largeur du tableau.

Answer 6

Je ne peux pas y penser de toute façon, sauf pour définir la largeur de la table à quelque chose. Dans mon cas, je choisis 100%, ce qui s’étend jusqu’à la largeur du rappeur à 50em:

<style type="text/css">
#wrapper {
    width: 1%;
    min-width:50em;
    padding: 10px;
}
#mainTable {
    width:100%;
}

#leftBox {
    float: left;
}

#rightBox {
    float: right;
}
</style>
<div id="wrapper">
    <div id="leftBox">A</div>
    <div id="rightBox">b</div>
    <br style="clear: both" />
    some text some text some text some text some text <br />
    some text some text some text some text some text <br />
    some text some text some text some text some text
    <table id="mainTable" border="1"><tr><td>test</td><td>test 2</td></tr></table>
</div>

Answer 7

@MattMitchell, vous pourriez avoir quelque chose là-bas. Et ensuite, utilisez simplement float: left et float right, je suppose?