css - tablas - thead html

Dos tablas HTML una al lado de la otra, centradas en la página

Question

Tengo dos tablas en una página que quiero mostrar una al lado de la otra, y luego centrarlas dentro de la página (en realidad dentro de otra div, pero esta es la más simple que se me ocurre):

<style>
  #outer { text-align: center; }
  #inner { text-align: left; margin: 0 auto; }
  .t { float: left; }
  table { border: 1px solid black; }
  #clearit { clear: left; }
</style>

<div id="outer">
  <p>Two tables, side by side, centered together within the page.</p>

  <div id="inner">
    <div class="t">
      <table>
        <tr><th>a</th><th>b</th></tr>
        <tr><td>1</td><td>2</td></tr>
        <tr><td>4</td><td>9</td></tr>
        <tr><td>16</td><td>25</td></tr>
      </table>
    </div>

    <div class="t">
      <table>
        <tr><th>a</th><th>b</th><th>c</th></tr>
        <tr><td>1</td><td>2</td><td>2</td></tr>
        <tr><td>3</td><td>5</td><td>15</td></tr>
        <tr><td>8</td><td>13</td><td>104</td></tr>
      </table>
    </div>

  </div>
  <div id="clearit">all done.</div>
</div>

Entiendo que tiene algo que ver con el hecho de que las tablas están flotando, pero no entiendo qué me falta. Hay muchas páginas web que describen algo así como la técnica que muestro aquí, pero en cualquier caso, no funciona; las mesas se aferran obstinadamente al margen izquierdo.

Answer 1

Dale a tu div interno un ancho.

EJEMPLO

Cambia tu CSS:

<style>
#outer { text-align: center; }
#inner { text-align: left; margin: 0 auto; }
.t { float: left; }
table { border: 1px solid black; }
#clearit { clear: left; }
</style>

A esto:

<style>
#outer { text-align: center; }
#inner { text-align: left; margin: 0 auto; width:500px }
.t { float: left; }
table { border: 1px solid black; }
#clearit { clear: left; }
</style>

Answer 2

El problema es que debe darle #inner un width establecido (todo menos auto o inherit ). El margin: 0 auto; El truco solo funciona si el elemento interno es más estrecho que su elemento contenedor. Sin que se le #inner un width , #inner se expande automáticamente al ancho completo de #outer , lo que provoca que su contenido se #outer a la izquierda.

Answer 3

El problema es que el DIV que debe centrar sus tablas no tiene ancho definido. De forma predeterminada, los DIV son elementos de bloque y ocupan todo el ancho de su elemento principal, en este caso, el documento completo (que se propaga a través del DIV del #intervalo), por lo que el estilo de margen automático no tiene ningún efecto.

Para que esta técnica funcione, simplemente tiene que establecer el ancho del div que tiene margin: auto a cualquier cosa que no sea "auto" o "inherit" (ya sea un valor de píxel fijo o un porcentaje).

Answer 4

Por la parte superior de mi cabeza, puede intentar usar "margin: 0 auto" para #outer en vez de #inner.

A menudo agrego color de fondo a mis DIV para ver cómo se muestran en la vista. Esa podría ser una buena forma de diagnosticar lo que sucede aquí.

Answer 5

Si fuera yo, haría algo como esto:

<style type="text/css" media="screen">
 table { border: 1px solid black;float:left;width:148px;}
 #table_container{width:300px;margin:0 auto;}
</style>

Con la mesa como:

<div id="table_container">
  <table>
    <tr>
      <th>a</th>
      <th>b</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>4</td>
      <td>9</td>
    </tr>
    <tr>
      <td>16</td>
      <td>25</td>
    </tr>
  </table>
  <table>
    <tr>
      <th>a</th>
      <th>b</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>4</td>
      <td>9</td>
    </tr>
    <tr>
      <td>16</td>
      <td>25</td>
    </tr>
  </table>
</div>

Answer 6

<style>
#outer { text-align: center; }
#inner { width:500px; text-align: left; margin: 0 auto; }
.t { float: left; width:240px; border: 1px solid black;}
#clearit { clear: both; }
</style>

Answer 7

Me doy cuenta de que esta es una pregunta antigua, pero aquí va de todos modos.

Lo siguiente funcionará en navegadores compatibles e IE8 en modo estándar (es decir, con un conjunto de tipos de documentos).

#inner {text-align:center;}
.t {display:inline-block;}

Desafortunadamente, realmente no hay forma de modificarlo para que funcione en IE6. Para IE7, agregar un zoom: 1 a los divs .t (a través de un comentario condicional) podría ayudar, pero no tengo IE7 disponible para probar en este momento.

Answer 8

Desafortunadamente, todas estas soluciones se basan en especificar un ancho fijo. Dado que las tablas se generan dinámicamente (resultados estadísticos extraídos de una base de datos), el ancho no se puede conocer de antemano.

El resultado deseado se puede lograr al envolver las dos tablas dentro de otra tabla:

<table align="center"><tr><td>
//code for table on the left
</td><td>
//code for table on the right
</td></tr></table>

y el resultado es un par de tablas perfectamente centradas que responde de forma fluida a anchos arbitrarios y tamaños de página (re) (y el atributo de tabla align = "center" podría ser elevado a un div externo con margin autos).

Concluyo que hay algunos diseños que solo se pueden lograr con tablas.

Answer 9

Descubrí que podía resolver esto simplemente colocando las dos mesas una al lado de la otra en una mesa centrada. Aquí está el código

Agregué dos líneas de código en la parte superior e inferior de las dos tablas existentes

<style>
  #outer { text-align: center; }
  #inner { text-align: left; margin: 0 auto; }
  .t { float: left; }
  table { border: 1px solid black; }
  #clearit { clear: left; }
</style>

<div id="outer">

  <p>Two tables, side by side, centered together within the page.</p>

  <div id="inner">
   <table style="margin-left: auto; margin-right: auto;">
   <td>
    <div class="t">
      <table>
        <tr><th>a</th><th>b</th></tr>
        <tr><td>1</td><td>2</td></tr>
        <tr><td>4</td><td>9</td></tr>
        <tr><td>16</td><td>25</td></tr>
      </table>
    </div>

    <div class="t">
      <table>
        <tr><th>a</th><th>b</th><th>c</th></tr>
        <tr><td>1</td><td>2</td><td>2</td></tr>
        <tr><td>3</td><td>5</td><td>15</td></tr>
        <tr><td>8</td><td>13</td><td>104</td></tr>
      </table>
    </div>
    </td>
    </table>
  </div>
  <div id="clearit">all done.</div>
</div>