Tecnología

Inicio

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

December 18

Usando el "overflow: auto" pareja propiedad-valor en la hoja de estilo en cascada (CSS) Código da una barra de desplazamiento a un elemento HTML cuando su contenido van sobre una anchura o la altura máxima. Sabiendo esto, se puede hacer un desplazamiento mesa envolviéndolo en un elemento que contiene, como un DIV. Desde la barra de desplazamiento se llevará algo de espacio en el interior del DIV y causar una segunda barra de desplazamiento, se debe añadir un poco de espacio para ella en su código. Puede aplicar este truco en tablas para crear ya sea una barra de desplazamiento vertical u horizontal.

Instrucciones

1 Abra la 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 etiqueta "<div>". 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 línea siguiente:

</ Table>

</ Div>

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

<Style type = "text / css">

</ Style>

4 Establecer un ancho de la mesa si no lo ha hecho aún: 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 su DIV a 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 establecer la propiedad "desbordamiento" en "auto": div {width: 318px; altura: 200px; overflow: auto; }. Cuando la altura de la mesa es superior a la altura de la DIV, entonces el se mostrará una barra de desplazamiento vertical.

Consejos y advertencias

  • Para obtener una barra de desplazamiento horizontal, ajustar 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 mesa es superior a la anchura de la DIV.
  • Copia de seguridad de archivos de páginas Web antes de intentar editarlos.