CSS Responsive Tables

முழு உள்ளடக்கத்தையும் காண்பிக்க திரை மிகவும் சிறியதாக இருந்தால், பதிலளிக்கும் அட்டவணை ஒரு கிடைமட்ட உருளும் பட்டையைக் காண்பிக்கும்.

விளைவைக் காண உலாவி சாளரத்தின் அளவை மாற்றவும்:

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

இது எப்படி செய்வது:

<table> உறுப்பை ஒரு <div> கொள்கலனில் மூடவும்.

<div> உறுப்புக்கு overflow-x பண்பை auto ஆக அமைக்கவும்:

Example

div.tablecontainer {
  overflow-x: auto;
}

💻 குறிப்பு:

OS X Lion (Mac இல்), உருளும் பட்டைகள் இயல்பாக மறைக்கப்பட்டு, பயன்படுத்தப்படும்போது மட்டுமே காட்டப்படும் ("overflow:scroll" அமைக்கப்பட்டிருந்தாலும் கூட).

More Examples

ஒரு அழகான அட்டவணையை உருவாக்கவும்

இந்த எடுத்துக்காட்டு ஒரு அழகான அட்டவணையை எவ்வாறு உருவாக்குவது என்பதை நிரூபிக்கிறது.

First Name	Last Name	Age	City
John	Doe	30	New York
Jane	Smith	25	London
Bob	Johnson	35	Paris

அட்டவணைத் தலைப்பைச் சேர்க்கவும் மற்றும் நிலைநிறுத்தவும்

இந்த எடுத்துக்காட்டு ஒரு அட்டவணைத் தலைப்பை எவ்வாறு சேர்ப்பது மற்றும் நிலைநிறுத்துவது என்பதை நிரூபிக்கிறது.

Employee Information
Name	Position	Department	Salary
John Smith	Developer	IT	$65,000
Jane Doe	Designer	Creative	$55,000
Bob Wilson	Manager	Operations	$75,000

Exercise

CSS ஐப் பயன்படுத்தி ஒரு அட்டவணையை பதிலளிக்கும் வகையில் எப்படி உருவாக்க முடியும்?

❓ CSS ஐப் பயன்படுத்தி ஒரு அட்டவணையை பதிலளிக்கும் வகையில் எப்படி உருவாக்க முடியும்?

Use overflow-y:auto on the <table> element

✗ தவறு! overflow-y செங்குத்து உருளுதலுக்கு மட்டுமே, கிடைமட்ட பதிலளிப்புத் தன்மைக்கு இல்லை

Wrap the table inside a <div> with overflow-x:auto

✓ சரி! அட்டவணையை overflow-x:auto கொண்ட <div> உள்ளே மூடுவது சிறிய திரைகளில் கிடைமட்ட உருளலை அனுமதிக்கிறது

Set display: block on the <table> element

✗ தவறு! display: block அட்டவணையின் இயல்பான தளவமைப்பை மாற்றும் ஆனால் பதிலளிக்கும் தன்மையை உறுதிப்படுத்தாது

Apply width: 100% to the <table> element

✗ தவறு! width: 100% அட்டவணையை முழு அகலமாக்கும் ஆனால் நீளமான அட்டவணைகளுக்கு கிடைமட்ட உருளலை வழங்காது

CSS Table Properties

அட்டவணைகளை வடிவமைக்க உதவும் முக்கிய CSS பண்புகள்:

Property	Description
border	ஒரே அறிவிப்பில் அனைத்து எல்லைப் பண்புகளையும் அமைக்கிறது
border-collapse	அட்டவணை எல்லைகள் சுருக்கப்பட வேண்டுமா இல்லையா என்பதைக் குறிப்பிடுகிறது
border-spacing	அடுத்தடுத்த கலங்களின் எல்லைகளுக்கு இடையே உள்ள தூரத்தைக் குறிப்பிடுகிறது
caption-side	அட்டவணைத் தலைப்பின் இடத்தைக் குறிப்பிடுகிறது
empty-cells	அட்டவணையில் உள்ள வெற்று கலங்களில் எல்லைகள் மற்றும் பின்னணியைக் காட்ட வேண்டுமா இல்லையா என்பதைக் குறிப்பிடுகிறது
table-layout	அட்டவணைக்குப் பயன்படுத்த வேண்டிய தளவமைப்பு வழிமுறையை அமைக்கிறது

💡 மேம்பட்ட உதவிக்குறிப்பு:

பதிலளிக்கும் அட்டவணைகளை உருவாக்கும்போது, மொபைல் சாதனங்களில் தகவலை வழங்க வேறுபட்ட வடிவமைப்புகளை கருத்தில் கொள்ளுங்கள். சிக்கலான அட்டவணைகளுக்கு, கார்டுகள் அல்லது கட்டமைக்கப்பட்ட பட்டியல்களைப் பயன்படுத்தவும்.