¿Cómo puedo colocar un SPAN para alinearme a cada lado y por encima de una TABLA?

Question

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

¿Cómo puedo ubicar esos espacios (se pueden cambiar a cualquier elemento) de modo que, dependiendo de qué tan grande sea la tabla (no definida en ningún lugar, y no debería ser), los períodos se coloquen justo en la parte superior del lado izquierdo de La mesa y el lado derecho de la mesa.

Ejemplo:

a    b
table0
table1
table2

(donde a es el tramo izquierdo, y b es el tramo derecho)

P.S. Puedes cambiar cualquier barra de la tabla interna html.

Answer 1

  

No los coloca relativamente, ni   ¿La respuesta de Rob Allen, los ponen?   en los confines del navegador no,   dentro del ancho de la mesa.

Bueno, van a estar limitados por el ancho de su contenedor y la respuesta de Rob hace que la tabla y el ancho del contenedor sean del 100%.

La única solución que se me ocurre es poner una fila en su tabla con una sola columna (que abarca todas las columnas) y en esa fila tienen sus DIV flotantes.

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

Me encontré con un problema similar y encontré una solución. No depende del ancho de la tabla, pero es un poco más complicado. Funciona en todos los navegadores, incluidos IE5.5, IE6 y posteriores.

  <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 no puede usar un flotador por alguna razón, entonces puede usar un estilo alternativo .tablediv que encontré por error. Simplemente reemplaza el flotador : left; para mostrar: bloque en línea; Esto funciona en todos los navegadores modernos, pero no en IE7 y anteriores.

Ahora entiendes mi punto y estoy seguro de que encontrarás otras soluciones. Solo no olvides que el .tablediv será tan largo como el contenido interno. Por lo tanto, colocar un párrafo en él hará que se extienda a un tamaño más grande que nuestra tabla.

Answer 4

si tienes divs en lugar de span, prueba float: left for span a y float: right for 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>

No los coloca relativamente, ni tampoco la respuesta de Rob Allen, sino que los ubican en los confines del navegador, dentro del ancho de la tabla.

Answer 6

No puedo pensar en nada, excepto para establecer el ancho de la tabla en algo. En mi caso, elijo el 100%, que se extiende hasta el ancho del rapero en 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, podrías tener algo allí. Y luego solo usa float: left y float right, supongo?