Cómo crear una tabla de la barra de desplazamiento en CSS

Utilizando el "overflow: auto" par propiedad-valor en Cascading Style Sheet (CSS) Código da una barra de desplazamiento a un elemento HTML cuando sus contenidos van en una anchura o la altura máxima. Sabiendo esto, usted puede hacer un pergamino mesa envolviéndolo en un elemento que contiene, como un DIV. Desde la barra de desplazamiento se ocupará algún espacio dentro del DIV y causar una segunda barra de desplazamiento, se debe añadir un poco de espacio para ello en el código. Puede aplicar este truco en tablas para crear ya sea una barra de desplazamiento vertical u horizontal.

Instrucciones

1

Abra su página Web que contiene la tabla en el Bloc de notas o un editor de código. Encuentra la apertura "<table>" etiqueta y añadir una abertura "<div>" etiqueta. Dar el "<div>" etiquetar un nombre de ID:

<Div id = "scroll">

<Table>

2

Busque el cierre "</ table>" etiqueta y añadir un cierre "</ div>" etiqueta en la siguiente línea:

</ Table>

</ Div>

3

Ir a la parte superior de su código y buscar entre los "<head>" etiquetas para "<style>" etiquetas. Añadir la "<style>" etiquetas si usted no ve ninguna ahí:

<Style type = "text / css">

</ Style>

4

Establezca una anchura de la mesa si no ya lo hace: mesa {width: 300px; }. Este código se encuentra ninguna tabla de la página web y le da un ancho de 300 píxeles.

5

Ajuste el ancho de la DIV hasta un valor de 18 píxeles más ancho que su mesa, para dar cabida a la barra de desplazamiento: div {width: 318px; }.

6

Dele a su div una altura y establezca la propiedad "desbordamiento" en "auto": div {width: 318px; altura: 200px; overflow: auto; }. Cuando la altura de la tabla supera la altura del DIV, entonces el se mostrará una barra de desplazamiento vertical.

Consejos y advertencias

  • Para obtener una barra de desplazamiento horizontal, establezca el ancho de la DIV a un valor que desea utilizar como la anchura máxima de la tabla en su lugar. La propiedad "desbordamiento" agregará una barra de desplazamiento horizontal cuando la tabla supera el ancho de la DIV.
  • Copia de seguridad de archivos de páginas Web antes de intentar editarlos.