CSS का उपयोग करके टेबल लेआउट कंट्रोल करना

table-layout प्रॉपर्टी

टेबल लेआउट को कंट्रोल करने के लिए table-layout प्रॉपर्टी का उपयोग करें।

संभावित मान:

table-layout: auto | fixed | initial | inherit;

मानों का विवरण:

• auto: ब्राउज़र कंटेंट के आधार पर कॉलम चौड़ाई की गणना करता है (डिफ़ॉल्ट)
• fixed: टेबल और कॉलम चौड़ाई टेबल की चौड़ाई और कॉलम्स द्वारा निर्धारित होती है, कंटेंट द्वारा नहीं
• initial: डिफ़ॉल्ट मान पर रीसेट
• inherit: पैरेंट एलिमेंट से विरासत में लें

उदाहरण 1: table-layout: auto

डिफ़ॉल्ट व्यवहार - कंटेंट के आधार पर कॉलम चौड़ाई:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  background-color: black;
  color: white;
}
table#demo {
  table-layout: auto;
  width: 210px;
}
</style>
</head>
<body>
<h2>टीम रैंकिंग टेबल</h2>
<table id="demo">
  <tr><th>टीम</th><th>रैंक</th><th>पॉइंट्स</th></tr>
  <tr><td>भारत</td><td>1</td><td>200</td></tr>
  <tr><td>इंग्लैंड</td><td>2</td><td>180</td></tr>
  <tr><td>ऑस्ट्रेलिया</td><td>3</td><td>150</td></tr>
  <tr><td>न्यूजीलैंड</td><td>4</td><td>130</td></tr>
  <tr><td>दक्षिण अफ्रीका</td><td>5</td><td>100</td></tr>
  <tr><td>वेस्टइंडीज</td><td>6</td><td>80</td></tr>
  <tr><td>पाकिस्तान</td><td>7</td><td>70</td></tr>
</table>
</body>
</html>

आउटपुट

कॉलम चौड़ाई कंटेंट (टीम नामों की लंबाई) के अनुसार एडजस्ट होगी।

उदाहरण 2: table-layout: fixed

फिक्स्ड लेआउट - तेज़ रेंडरिंग, पूर्वानुमेय चौड़ाई:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  background-color: green;
  color: white;
}
table#demo {
  table-layout: fixed;
  width: 100%;
}
</style>
</head>
<body>
<h2>टीम रैंकिंग टेबल</h2>
<table id="demo">
  <tr><th>टीम</th><th>रैंक</th><th>पॉइंट्स</th></tr>
  <tr><td>भारत</td><td>1</td><td>200</td></tr>
  <tr><td>इंग्लैंड</td><td>2</td><td>180</td></tr>
  <tr><td>ऑस्ट्रेलिया</td><td>3</td><td>150</td></tr>
  <tr><td>न्यूजीलैंड</td><td>4</td><td>130</td></tr>
  <tr><td>दक्षिण अफ्रीका</td><td>5</td><td>100</td></tr>
  <tr><td>वेस्टइंडीज</td><td>6</td><td>80</td></tr>
  <tr><td>पाकिस्तान</td><td>7</td><td>70</td></tr>
</table>
</body>
</html>

आउटपुट

कॉलम्स समान रूप से वितरित होंगे (प्रत्येक ~33.33%) क्योंकि कोई विशिष्ट कॉलम चौड़ाई सेट नहीं की गई है।

fixed vs auto - तुलना:

सर्वोत्तम अभ्यास:

• बड़ी डेटा टेबल्स के लिए fixed उपयोग करें
• fixed के साथ <col> या पहली पंक्ति में चौड़ाई सेट करें
• ओवरफ्लो कंटेंट के लिए overflow: hidden, text-overflow: ellipsis उपयोग करें