कैसे करें - साथ-साथ टेबल्स
CSS के साथ साइड-बाय-साइड टेबल बनाना सीखें।
टेबल्स को साथ-साथ कैसे रखें
float
CSS प्रॉपर्टी के साथ साइड-बाय-साइड टेबल कैसे बनाएं :
उदाहरण
* {
box-sizing: border-box;
}
/* Create a two-column
layout */
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
flex
CSS प्रॉपर्टी के साथ साइड-बाय-साइड टेबल कैसे बनाएं :
उदाहरण
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
नोट: फ्लेक्सबॉक्स इंटरनेट एक्सप्लोरर 10 और पुराने संस्करणों में समर्थित नहीं है। यह आप पर निर्भर है कि आप फ्लोट्स या फ्लेक्स का उपयोग करना चाहते हैं। हालाँकि, यदि आपको IE10 और डाउन के लिए समर्थन की आवश्यकता है, तो आपको फ्लोट का उपयोग करना चाहिए।
युक्ति: फ्लेक्सिबल बॉक्स लेआउट मॉड्यूल के बारे में अधिक जानने के लिए, हमारे सीएसएस फ्लेक्सबॉक्स अध्याय को पढ़ें ।
जवाबदेही जोड़ें
ऊपर दिया गया उदाहरण मोबाइल डिवाइस पर अच्छा नहीं लगेगा, क्योंकि दो कॉलम पृष्ठ के बहुत अधिक स्थान पर कब्जा कर लेंगे। एक प्रतिक्रियाशील तालिका बनाने के लिए, जिसे दो-स्तंभ लेआउट से मोबाइल उपकरणों पर पूर्ण-चौड़ाई वाले लेआउट में जाना चाहिए, निम्नलिखित मीडिया क्वेरी जोड़ें:
उदाहरण
/* Responsive layout - makes the two columns stack on top of each other
instead of next to each other on screens that are smaller than 600 px */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
टिप: टेबल को स्टाइल करने के तरीके के बारे में अधिक जानने के लिए हमारे CSS टेबल्स ट्यूटोरियल पर जाएं।
युक्ति: फ्लोट संपत्ति के बारे में अधिक जानने के लिए हमारे सीएसएस फ्लोट ट्यूटोरियल पर जाएं।
टिप: फ्लेक्स प्रॉपर्टी के बारे में अधिक जानने के लिए हमारे सीएसएस फ्लेक्सबॉक्स ट्यूटोरियल पर जाएं।