कैसे बनाया जाता है: साथ साथ तालिका

तालिका को साथ साथ करना कैसे

CSS का उपयोग करना कैसे float सांदर्भिक तालिका बनाने के लिए गुण:

उदाहरण

* {
  box-sizing: border-box;
}
/* दो स्तम्भ विन्यास बनाएं */
.column {
  float: left;
  width: 50%;
  padding: 5px;
}
/* Clearfix (फ्लॉट को साफ करें) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

स्वयं प्रयोग करें

CSS का उपयोग करना कैसे flex सांदर्भिक तालिका बनाने के लिए गुण:

उदाहरण

* {
  box-sizing: border-box;
}
.row {
  display: flex;
}
.column {
  flex: 50%;
  padding: 5px;
}

स्वयं प्रयोग करें

ध्यान दें:Flexbox Internet Explorer 10 और उससे पहले की संस्करण में समर्थन नहीं करता है। क्या आपको float या flex आपके अनुसार है। लेकिन अगर आपको IE10 और उससे पहले की संस्करण का समर्थन करना है, तो आपको float。

सूचना:फ्लेक्सिबल बॉक्स विन्यास मॉड्यूल के बारे में अधिक जानकारी प्राप्त करने के लिए हमारे CSS Flexbox शिक्षण。

प्रतिक्रियाशीलता जोड़ें

ऊपरी उदाहरण मोबाइल डिवाइस पर सुंदर नहीं दिखेगा, क्योंकि दो स्तम्भ पृष्ठ के अधिक स्थान को ले लेंगे।

प्रतिक्रियामुखी तालिका बनाने के लिए, इसे दो स्तम्भ विन्यास से मोबाइल डिवाइस पर पूर्ण चौड़ाई विन्यास में बदलने के लिए नीचे दिए गए मीडिया क्वेरी जोड़ें:

उदाहरण

/* प्रतिक्रियामुखी विन्यास - 600 पिक्सल से कम आकार के स्क्रीन पर दो स्तम्भ को बारीबारी के बजाय स्टैक करें */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

स्वयं प्रयोग करें

संबंधित पृष्ठ

तालीम:CSS तालिका

तालीम:CSS फ्लॉटिंग

तालीम:CSS Flexbox