HTML Table Med et vannrett rulle

Du kan bruke en HTML-tabell for å vise innhold som passer godt i et kart slik som scorer eller gangetabellen. Hvis du ønsker å tildele en viss bredde for tabellen for å passe på nettstedet ditt, men innholdet er større, må du legge til en horisontal scrollbar til bord. Men, tabeller ikke støtter rullefelt, så du er nødt til å bruke en midlertidig løsning for å gjøre dette effektivt.

HTML-tabeller

Tabeller er en Hypertext Markup Language element som består av rader og kolonner. Når en rad og kolonne skjærer hverandre, danner de en celle. Denne cellen inneholder deretter tekst, bilder, lenker og andre element. Et bord kan bestå av bare en celle - fra en rad og kolonne - eller et ubegrenset antall celler. Den grunnleggende kode for en tabell er som følger:

<Table>
<Tr> <td> Cell 1, Rad 1 </ td>
<Td> Cell 2, Rad 1 </ td> </ tr>
<Tr> <td> Cell 1, Row 2 </ td>
<Td> Cell 2, Row 2 </ td> </ tr>
</ Table>

scrollbar Behaviour

Som standard, de fleste beholdere - inkludert div lag - vil skape horisontale og vertikale rulle når innholdet i beholderen er større enn selve beholderen. Dette gjør at besøkende til å bla for å vise resten av klippet innhold, uten å utvide størrelsen på beholderen og muligens bryte utformingen av siden din. Når innholdet er mindre enn beholderen, vises ingen rulle. Men tabellene viser aldri rullefelt, selv når du tvinge en scrollbar med kode. Dermed må du plassere hele tabellen i en annen beholder, for eksempel en div, for å gi inntrykk av en rullebord.

Scrolling Containere

Du kan innføre en horisontal scrollbar til din inneholder element, selv om dette elementet ikke ville naturligvis ha en scrollbar med gjennomgripende stilark eller CSS. Hvis du vil bruke en scrollbar til beholderen, tilsett stil "bla" med verdien "bla" og plassere tabellen på innsiden av beholderen, som i følgende eksempel:

<Div style = "width: 400px; height: 180px; overflow: auto; overflow-y: hidden">
<Table style = "width: 500px; height: 175 piksler;">
<Tr> <td> Cell 1, Rad 1 </ td>
<Td> Cell 2, Rad 1 </ td> </ tr>
</ Table>
</ Div>

Denne koden vil gjelde både en horisontal scrollbar bordet, slik at besøkende til å se helheten av innhold.

betraktninger

Legg merke til at innstillingen "overflow" eiendom til "auto" vil produsere både vertikal og horisontal scrollbar så du må skjule den vertikale scrollbar, på "Y" aksen. Denne metoden fungerer best hvis div container er litt høyere enn bordet ditt, og så lenge bordet er bredere enn div. Ellers vil scrollbar ikke vises. Du kan tvinge rullepilene skal vises, men de vil ikke være aktiv, hvis du setter overløp verdien til "bla" i stedet for "auto".