Moslashuvchan jadvallar

CSS moslashuvchan jadvallari

Moslashuvchan jadval ekran to‘liq kontentni ko‘rsatish uchun juda kichik bo‘lsa, gorizontal scroll panelini ko‘rsatadi.

Effektni ko‘rish uchun brauzer oynasining o‘lchamini o‘zgartiring:

First Name	Last Name	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points
Jill	Smith	50	50	50	50	50	50	50	50	50	50	50	50
Eve	Jackson	94	94	94	94	94	94	94	94	94	94	94	94
Adam	Johnson	67	67	67	67	67	67	67	67	67	67	67	67

Buni qanday qilish kerak:

<table> elementini <div> konteyner ichiga oling.

<div> elementi uchun overflow-x xossasini auto qilib belgilang:

Misol

div.tablecontainer {
overflow-x: auto;
}

O‘zingiz sinab ko‘ring »

Eslatma: OS X Lion’da (Mac’da) scroll panellari standart holatda yashirin bo‘ladi va faqat ishlatilganda ko‘rinadi ("overflow:scroll" belgilangan bo‘lsa ham).

Ko‘proq misollar

Make a fancy table
Ushbu misol chiroyli bezatilgan jadval yaratishni ko‘rsatadi.

Jadval sarlavhasini qo‘shish va joylashtirish
Ushbu misol jadval sarlavhasini (caption) qanday qo‘shish va joylashtirishni ko‘rsatadi.

CSS Table xossalari

Xususiyat	Tavsif
border	Barcha chegara xususiyatlarini bitta deklaratsiyada o‘rnatadi
border-collapse	Jadval chegaralarini yig‘ish yoki yo‘q qilishni belgilaydi
border-spacing	Qo‘shni hujayralar chegaralari orasidagi masofani belgilaydi
caption-side	Jadval sarlavhasini joylashtirishni belgilaydi
empty-cells	Jadvalning bo‘sh kataklarida chegaralar va fonni ko‘rsatish yoki ko‘rsatmaslikni belgilaydi
table-layout	Jadval uchun ishlatiladigan tartib algoritmini o‘rnatadi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish