ajuste de tabla con css

[totti026]

Hola que tal!!

Tengo un problema al ajustar una tabla en html y con css, lo que pasa es que tengo 29 columnas, la primera fila fija y las demas celdas con scroll.

y mis :

<thead>
<th scope='col'>

No se ajustan a mis <td>

Porque son demasiadas columnas, pero si se ajustan cuando son menos columnas...
lo que quiero esque la tabla tenga un ancho del 100% aunque la letra este muy pequeña...

este es mi css:

Código CSS:

h1 {
 text-align:center;
}
.outer {
position:relative;
padding:4em 0 3em 0;
width: 100%;
background:#eee;
margin:0;
border-radius:15px;
}
.innera {
overflow:auto;
width: 100%;
height:20em;
background:#eee;
}
 
.outer thead tr {
 
position:absolute;
top:1.5em;
height:1.5em;
left:0;
}
.outer th, .outer td {
width:10em; 
text-align:center;
font-size:x-small }
}
.outer th {
background:#724a10; 
color:#fff;}
.outer .dk {background:#fff;
}
 
.tableone {width:100%; border-collapse:collapse; margin:0 auto;}
.tabletwo {width:100%; border-collapse:collapse;}
 

y lo que he intentado es poner en relative el siguiente codigo en ves de ser absolute y si se ajustan los titulos con las celdas pero pierdo el scroll.

Código CSS:

.outer thead tr {
 
position:absolute;
top:1.5em;
height:1.5em;
left:0;
}
 

Ayuda xfavor!!
Gracias...

[pitufoweb]

También necesitas poner el código HTML para ver como lo tienes estructurado.



Saludos

[totti026]

Gracias pitufoweb, pues mira la estructura basica la tengo asi, solo que donde dice consulta ahi estoy ocuoando php para traer unos datos de una bdd,

Código HTML:

<div class="outer">
<div class="innera">
<table>
<thead>
        <tr>
        <th scope='col'><span>Col 1</span></th>
        <th scope='col'><span>Col 2</span></th>
        <th scope='col'><span>Col 3</span></th>
        <th scope='col'><span>Col 4</span></th>
        <th scope='col'><span>Col 5</span></th>
        <th scope='col'><span>Col 6</span></th>
        <th scope='col'><span>Col 7</span></th>
        <th scope='col'><span>Col 8</span></th>
        <th scope='col'><span>Col 9</span></th>
        <th scope='col'><span>Col 10</span></th>
        <th scope='col'><span>Col 11</span></th>
        <th scope='col'><span>Col 12</span></th>
        <th scope='col'><span>Col 13</span></th>
        <th scope='col'><span>Col 14</span></th>
        <th scope='col'><span>Col 15</span></th>
        <th scope='col'><span>Col 16</span></th>
        <th scope='col'><span>Col 17</span></th>
        <th scope='col'><span>Col 18</span></th>
        <th scope='col'><span>Col 19</span></th>
        <th scope='col'><span>Col 20</span></th>
        <th scope='col'><span>Col 21</span></th>
        <th scope='col'><span>Col 22</span></th>
        <th scope='col'><span>Col 23</span></th>
        <th scope='col'><span>Col 24</span></th>
        <th scope='col'><span>Col 35</span></th>
        <th scope='col'><span>Col 26</span></th>
        <th scope='col'><span>Col 27</span></th>
        <th scope='col'><span>Col 28</span></th>
        <th scope='col'><span>Col 29</span></th>        
        </tr>
</thead>
        <tr>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
        <TD > Consulta</TD>
    </tr>
    </div>
</div>
 

[pablolombardo]

Buenas.

Es que es imposible eso simplemente porque no entra.
Los navegadores no achican las tipografías en ningún caso. Si no entra, crece el contenedor.

Lo que podés hacer es o achicar la letra o lo más lógico dividir la tabla en dos.

Está bien que saques el position:absolute ya que sino no se va a ajustar nunca (no es necesario ponerle relative tampoco)

Por otro lado en el código que pasas no cerras el elemento <table> y las clases .tableone y .tabletwo no están asignadas a la tabla (nose si es adrede o no te diste cuenta)

Saludoss.

[totti026]

Gracias pablolombardo por tu tiempo, mira aquí pongo el ejemplo, solo quiero q se ajusten las columnas y la primera fila sea fija y lo demás tenga el scroll…
Aquí como ven No están ajustadas las columnas, tiene el position:absolute y si se queda fija la primera fila y va correctamente el scroll.



Aquí cambio el position : (position:relative) y se me ajustan las columnas como pueden ver…



Pero bajando el scroll no se queda fija la primera fila, osea que se mueve todo…



Como puedo solucionar esto…¿? para que esten ajustadas las columnas, este fija le primera fila y tenga scroll.

Y efectivamente pablolombardo ese código de las tablas (<table> y las clases .tableone y .tabletwo) no las ocupaba para nada… ya las quite.

Saludos!

[Banditolane]

Has pensado en construir la tabla con DIV's?

[totti026]

mmm no, la verdad no tengo idea como ocupar divisiones y con la opcion del scroll...
Alguna idea?

Gracias x tu atención Banditolane.

[pablolombardo]

Disculpá, pensé que tu problema era el scroll horizontal.

Para hacer lo que vos querés hasta el momento que yo tenga entendido se hace mediante anidar tablar. Una tabla fija para el header y una tabla con scroll para el resto.

Lo mejor que podés hacer es googlear esto de tablas anidadas o simplemente googlear tabla con fila fija. Te van a aparecer muchos links que te van a ayudar.

Pero es la única forma, CSS no provee de algo para lograrlo con una sola tabla.

Saludoss.

[totti026]

hey gracias pablolombardo estare buscando...