ऊर्ध्वाधर HTML तालिकाएँ

ऊर्ध्वाधर पंक्तियों के साथ HTML तालिकाएँ बनाना डेटा प्रदर्शित करने का एक अनूठा तरीका प्रदान करता है, जिसमें पंक्ति शीर्षलेख स्थित होते हैं शीर्ष के बजाय बाईं ओर. इसे प्राप्त करने के लिए, तालिका की संरचना को बदलने के लिए सीएसएस स्टाइल लागू किया जा सकता है। उपयोग किया जा सकता है:

tr { प्रदर्शन: ब्लॉक; नाव छोड़ी; } वें, टीडी { प्रदर्शन: ब्लॉक; }

इससे तालिका कोशिकाएं लंबवत रूप से प्रवाहित होंगी, संबंधित हेडर प्रत्येक पंक्ति के बाईं ओर दिखाई देंगे।

tr {
  display: block;
  float: left;
}

th, td {
  display: block;
}

टेबल पंक्तियों तक पहुंच बनाए रखना, जो अब कॉलम के रूप में प्रदर्शित होती है, निम्नलिखित सीएसएस को शामिल करके प्राप्त किया जा सकता है नियम:

/* सीमा-पतन */ tr>*:not(:first-child) { बॉर्डर-टॉप: 0; } tr:not(:first-child)>* { सीमा-बाएँ: 0; }

ये नियम सुनिश्चित करते हैं कि तालिका कोशिकाओं के बीच की सीमाएं केवल किनारों पर प्रस्तुत की जाती हैं, जिससे पंक्तियों के बीच स्पष्ट अंतर मिलता है। AngularJS के साथ संयोजन में इन तकनीकों का उपयोग करके, आप ऊर्ध्वाधर अभिविन्यास को संरक्षित करते हुए तालिका डेटा को गतिशील रूप से हेरफेर कर सकते हैं।