HTML Table Sizes

पूरी Table की Width सेट करना

By default, कोई table सिर्फ उतनी ही चौड़ी सिकुड़ती है जितना उसके content को चाहिए।

table element पर width: 100% सेट करने से यह इसके बजाय अपने containing element की पूरी width में फैल जाता है, जो modern responsive pages पर सबसे आम table width setting है।

उदाहरण: Setting Overall Table Width

<table style="width: 100%;">
  <tr><td>Full width table</td></tr>
</table>

Individual Columns को Size करना

table की पहली row में किसी cell पर width value सेट करना पूरे column को size करने की standard technique है, क्योंकि column की width पूरे column की property है, सिर्फ एक cell की नहीं -- बाद की rows में उसी column के लिए values को आमतौर पर ignore कर दिया जाता है।

उदाहरण: Sizing Individual Columns

<table>
  <tr>
    <th style="width: 70%;">Name</th>
    <th style="width: 30%;">Age</th>
  </tr>
</table>

Row Height सेट करना

किसी <tr> या उसके अंदर किसी cell पर height एक minimum row height सेट करता है -- अगर content को ज़्यादा जगह चाहिए तो row specified value से लंबी हो जाएगी, लेकिन यह दी गई height से कभी छोटी नहीं होगी, जो table की rows को visually consistent रखने के लिए उपयोगी है भले ही कुछ cells में ज़्यादा content हो।

उदाहरण: Setting Row Height

<table>
  <tr style="height: 50px;">
    <td>Tall row</td>
  </tr>
</table>

table-layout Property

table-layout: auto (default) ब्राउज़र से column widths finalize करने से पहले पूरी table में हर cell के content को measure कराता है, जो बहुत बड़ी tables पर धीमा हो सकता है। table-layout: fixed इसके बजाय सिर्फ पहली row की widths (या अगर कोई सेट न हो तो equal division) तुरंत उपयोग करता है, जिससे rendering तेज़ होती है और बाद के content की परवाह किए बिना column widths सख्ती से locked रहती हैं।

उदाहरण: The table-layout Property

<table style="table-layout: fixed; width: 100%;">
  <tr>
    <td>Fixed width column</td>
  </tr>
</table>

Responsive Table Sizing

पूरी तरह fixed pixel widths वाली एक table narrow mobile screen पर overflow कर सकती है, जिससे पूरे page layout में अजीब horizontal scrolling होने लगती है।

Table को overflow-x: auto वाले container में लपेटने से वह horizontal scroll सिर्फ table तक सीमित रह जाता है, जिससे बाकी page layout intact रहता है।

उदाहरण: Responsive Table Sizing

<div style="overflow-x: auto;">
  <table style="width: 800px;">
    <tr><td>Wide content</td></tr>
  </table>
</div>