informaticaPC

Tutorial de CSS

Crear una tabla con scroll


Regístrate

Los datos recopilados tienen como finalidad el envío de novedades sobre contenidos formativos propios (tanto en modalidad gratuita como de pago) y de terceros en calidad de afiliado, así como también noticias, información y otros contenidos relacionados con la informática y las nuevas tecnologías, siendo responsable de dicha información Francisco Javier Medina Medina (propietario de InformaticaPC.com).
Al obtener tu consentimiento los datos serán almacenados en el proveedor de E-Mail marketing MailRelay.
Por supuesto, en cualquier momento podrás hacer uso de tus derechos para acceder, rectificar, limitar y suprimir dichos datos.

Crear una tabla con scroll

Lo que haremos será crear una tabla dentro de un <div> al que daremos un ancho determinado y aplicaremos la propiedad CSS overflow:auto (con la que se mostrará la barra de herramientas sólo en caso necesario).

Código HTML:

<html>
    <head>
        <title>Cursos gratis</title>
        <link rel="stylesheet" type="text/css" href="estilos.css" />
    </head>

    <body>

        <div id="div1">
            <table border="1">
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
            </table>
        </div>

    </body>
</html>

Código CSS:

#div1 {
    overflow:scroll;
    height:200px;
    width:500px;
}

#div1 table {
    width:500px;
    background-color:lightgray;
}

Descargar ejemplo

En la siguiente imagen puedes ver el resultado:

Tabla con scroll

Primera página Anterior Siguiente Última página
Usamos cookies para ofrecerte una experiencia mejorada, el continuar navegando supone que aceptas su uso