2011-06-07 15 views
10

में एक तालिका को विभाजित करें क्या सीएसएस का उपयोग करके आधे हिस्से में एक टेबल को विभाजित करने और दो हिस्सों को साइड-साइड प्रदर्शित करने के लिए वैसे भी है।आधे

उदाहरण के लिए, ये लो:

| row1 | row1 | row1 | 
| row2 | row2 | row2 | 
| row3 | row3 | row3 | 
| row4 | row4 | row4 | 
| row5 | row5 | row5 | 

और यह सुनिश्चित करें:

| row1 | row1 | row1 | | row4 | row4 | row4 | 
| row2 | row2 | row2 | | row5 | row5 | row5 | 
| row3 | row3 | row3 | 

मैं HTML मार्कअप (एक कस्टम वर्ग के साथ "तोड़ने" पंक्ति अंकन की तरह) को बदल सकते हैं, लेकिन मैं यह तय करने में सक्षम होना चाहिए कि तालिका को विभाजित किया जाएगा या सीएसएस के माध्यम से नहीं किया जाएगा।

मुझे पता है कि मैं 2 टेबल का उपयोग कर सकता हूं और display:inline-table का उपयोग कर सकता हूं, लेकिन मुझे केवल एक तालिका का उपयोग करना चाहिए क्योंकि मुझे लगातार कॉलम चौड़ाई की आवश्यकता है (तालिका में ऑटो लेआउट होना चाहिए)।

+3

मुझे लगता है कि एक तरह से खारिज कर देता है एक तालिका के "परिभाषा" कोशिश कर सकते हैं। यदि यह द्रव तत्व था, तो यह एक टेबल नहीं होगा, और इसके विपरीत, यदि यह एक टेबल है तो यह तरल पदार्थ नहीं है। यद्यपि आप इसे अजीब स्थिति के साथ हैक करने में सक्षम हो सकते हैं ... – davin

+0

मैंने यह बहुत सोचा, लेकिन चूंकि मैं एचटीएमएल/सीएसएस में कोई विशेषज्ञ नहीं हूं, इसलिए मैंने यह पूछने का फैसला किया ... :( –

उत्तर

4

आप बहु कॉलम का उपयोग कर सकते हैं, लेकिन यह एक CSS3 संपत्ति है। उदाहरण के लिए:

-moz-column-count: 2; 
-moz-column-gap: 20px; 
-webkit-column-count: 2; 
-webkit-column-gap: 20px; 
column-count: 2; 
column-gap: 20px; 

इस आधुनिक ब्राउज़रों

में काम करना चाहिए आप भी इस विधि

http://www.csscripting.com/css-multi-column/

+0

ऐसा लगता है, लेकिन नहीं आईई, और क्रोम में '-webkit' संस्करण के साथ। यह एक समस्या नहीं होगी क्योंकि मैं प्रिंस एक्सएमएल का उपयोग करूँगा। साथ ही, मैंने देखा कि सेल कॉलम के बीच टूट सकता है, क्या इससे बचने का कोई तरीका है? –

+0

जहां तक ​​मुझे पता है, कोई रास्ता नहीं है। – eagle12

+0

आईएम 10 के साथ -एम-कॉलम-गिनती के साथ काम करता है। सेल तोड़ने के लिए ... यह मुश्किल और असंगत है, या कम से कम मुझे अभी तक कोई नहीं मिला है ऐसा करने का एक सतत तरीका। आप 'डिस्प्ले: इनलाइन-ब्लॉक' सेट करके या उस शैली के साथ एक div में अपनी सामग्री को लपेटकर एक व्यक्तिगत सेल नहीं तोड़ सकते हैं, लेकिन पूरी पंक्ति इस तरह सहयोग नहीं करेगी। कुछ सामग्री ठीक काम करेगी , दूसरी सामग्री दूसरे कॉलम पर इंडेंट के साथ अक्सर क्विर्की होगी। 'सी olumn-break' गुण, लेकिन समर्थन spotty है मैं अभी तक एक मेज में एक पूरी पंक्ति के साथ अच्छी तरह से काम करने के लिए उन्हें पाने के लिए है। – Randolpho

संबंधित मुद्दे