Scrooll (overflow: auto) no me funciona correctamente

[danideu]

Hola a todos los foreros,

Quiero hacer una especie de datagrid pero solo con CSS. He creado el siguiente código HTML para crear la "tabla" (solo la cabecera y una fila) pero con Divs:

CODIGO

Código HTML:

<div id="datagrid">
            <ul class="cabecera">
                <li style="width:20px">ID</li>
                <li style="width:200px">Proveedor</li>
                <li style="width:150px">Dirección</li>
                <li style="width:80px">Teléfono</li>
                <li style="width:80px">Fax</li>
                <li style="width:80px">E-mail</li>
                <li style="width:80px">Importe</li>
                <li style="width:150px">Solicitante</li>
                <li style="width:40px">Estado</li>
                <li style="width:60px">Acción</li>
            </ul>
            <br />
            <div class="clear"></div>
            <ul class="info">
                <li style="width:20px">ID</li>
                <li style="width:200px">Proveedor</li>
                <li style="width:150px">Dirección</li>
                <li style="width:80px">Teléfono</li>
                <li style="width:80px">Fax</li>
                <li style="width:80px">E-mail</li>
                <li style="width:80px">Importe</li>
                <li style="width:150px">Solicitante</li>
                <li style="width:40px;background-color: #6BCAE4; color:#000000">Activo</li>
                <li style="width:60px">
                    <a href="#"><img src="images/iconos/building_edit.png" alt="Modificar"></a>
                    <a href="#"><img src="images/iconos/cancel.png" alt="No autorizar"></a>
                    <a href="#"><img src="images/iconos/accept.png" alt="Autorizar"></a>
                </li>
            </ul>
</div>
 

Y mi código CSS es el siguiente, teniendo en cuenta que el tamaño que le he puesto al cuerpo de la web es de width: 900px:

Código CSS:

#datagrid{
    overflow: auto;
    width: 900px;
}
#datagrid ul{
    display: block; 
}
#datagrid ul li{
    display: inline;
    opacity: 0.6;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    color: #33617F; 
    float: left; 
    padding: 6px 14px 6px 14px; 
    margin: 0 0 0 2px; 
    text-align: left;    
}
.cabecera li{
    background: #C6E5F9 url(../images/bullet.gif) no-repeat 7px 12px; 
    font-size: .9em; 
    font-weight: bold;    
}
.info li{
        text-align: left;
    border-bottom: 1px solid #C6E5F9;
    margin: 0px;
}
 

PROBLEMA

El problema es que me descuadra todo .. es decir, si le pongo un overflow: auto, deberia mostrarme un scroll en caso de pasarse el ancho, pero lo que me hace es que me pone lo que sobra debajo, con lo que queda descuadrado el datagrid. Podéis ver una imagen de como ha quedado aquí:





Espero vuestra valioso conocimiento.


Saludos.

[AlbertoGarcia]

Hola! si vas a mostrar información tabulada usa una tabla, es justo para eso y además es crossbrowser, porque la u´nica forma en que puedes conseguir lo que quieres, y no es crossbrowser, es jugando con el display:table y derivados.

Pero te aconsejo firmemente una tabla, usar listas para simular tablas es como usar tablas para simular divisiones.

Salud!

[cristian_cena]

Coincido con alberto, a propósito aquí tienes un tutorial y aquí unos muy buenos ejemplos para inspirarse.
Saludos!

[jomaruro]

Hola:

También tienes aquí un ejemplo hecho sólo con CSS.

Saludos.

[danideu]

muchas gracias a todos ... lo he conseguido ya .. pero ahora tengo un problema. Como veis en la imagen lo que hay escrito en las celdas nunca pasa del tamaño de cada una de ellas .. pero lo que me esta pasando es que por ejemplo donde pone Concepto, ahi va un texto grande y claro me escribe en 2 lineas pero me descuadra todo ... no me hace las demas lineas de las filas con el mismo tamaño.

No se si me explico ... como en excel en formato de celdas cuando pones "ajustar a texto" .. que si se pasa el tamaño del texto de la celda .. te hace toda la fila mas ancha .. no solo la celda.

Si no entendeis algo .. decirmelo ..

Saludos y de nuevo gracias.

[AlbertoGarcia]

Debo entender la tabla sigue siendo una sucesión de listas, bien, entonces esa fila es una lista, entonces ¿no le puedes dar un alto a esa lista y/o a sus elementos?

Este dolor de cabeza que tienes con esta tabla desaparecería si realmente fuera una tabla.

Salud!