केवल एचएसएस और कोई जावास्क्रिप्ट

का उपयोग करके एकल स्टैक्ड कॉलम में एचटीएमएल तालिका को फोर्स करें। मैं एक HTML टेम्पलेट बना रहा हूं जो एक फॉर्म को लपेटने के लिए उपयोग की जाने वाली तालिका को लपेटता है। मेरे पास एचटीएमएल पर पूर्ण नियंत्रण है जो मेज को लपेटता नहीं है। क्लाइंट को भेजे जाने से पहले तालिका को मेरे टेम्पलेट में इंजेक्शन दिया जाता है। मेरा इस पर कोई नियंत्रण नहीं है। मेरे पास केवल एक चीज है जिस पर नियंत्रण होता है वह HTML है जो टेबल और किसी भी सीएसएस को लपेटता है।केवल एचएसएस और कोई जावास्क्रिप्ट

<table> 
    <tr> 
    <td>Column 1</td> 
    <td>Column 2</td> 
    </tr> 
    <tr> 
    <td>this is column 1</td> 
    <td>this is column 2</td> 
    </tr> 
</table> 

------------------------------------------------- 
|Column 1     |Column 2   | 
------------------------------------------------- 
|this is column 1   |this is column 2 | 
-------------------------------------------------

हालांकि मैं अगर हम एक स्टैक्ड स्तंभ के रूप में यह दिखा सकता है पसंद करेंगे:

तालिका एक दो स्तंभ तालिका है कि इस तरह दिखता है।

---------------------------- 
|Column 1     | 
----------------------------- 
|this is column 1   | 
----------------------------- 
|Column 2     | 
----------------------------- 
| this is column 2   | 
-----------------------------

क्या केवल सीएसएस, कोई जावास्क्रिप्ट का उपयोग करके इसे प्राप्त करने का कोई तरीका नहीं है।

स्रोत

2012-09-10 KJF

क्या आपके पास कोई कोड है जिसे आपने पहले आजमाया है? – Kyle

टेबल के बजाय इसे div में लपेटें यदि आप रैपिंग एचटीएमएल बदल सकते हैं - इसके लिए एक टेबल का उपयोग करने से कहीं अधिक सरल और ठोस। – easwee

@KJF ईएसवीई के रूप में div का उपयोग करने से सुझाव मिलता है तालिका से बेहतर होगा। जैसा कि मैंने उल्लेख किया है – freebird

नहीं, यह उचित रूप से मार्कअप को बदलने के बिना संभव नहीं है। एचटीएमएल में टेबल्स पंक्तियों के रूप में संरचित हैं, कॉलम के रूप में नहीं। उदाहरण में आप दे आप फिर से ऑर्डर दे रहे हैं सामग्री:

मूल आदेश:
Column 1 -> Column 2 -> this-is-col-1 -> this-is-col-2

नए आदेश:
Column 1 -> this-is-col-1 -> Column 2 -> this-is-col-2

क्यों मैं "नहीं कहा उचित संभव "? खैर, पूर्ण स्थिति और इसी तरह की तकनीकों के साथ आप जो लेआउट एक साथ चाहते हैं उसे हैक कर सकते हैं - लेकिन सीएसएस-चोट की प्रतीक्षा की दुनिया है क्योंकि मुझे उम्मीद है कि वास्तविक पृष्ठ में अच्छा प्रदर्शन करने के लिए यह दृष्टिकोण नहीं है।

अतिरिक्त नोट: "फिर से आदेश" समस्या के लिए कुछ एक छोटे से पूरा करने के लिए इस लेआउट, होगा आसान हो सकता है कि जोड़ने के लिए, जहां आदेश ही रहता है:

---------------------------- 
|Column 1     | 
----------------------------- 
|Column 2     | 
----------------------------- 
|this is column 1   | 
----------------------------- 
| this is column 2   | 
-----------------------------

लेकिन यह स्पष्ट रूप से नहीं है कि आप क्या चाहते हैं।

स्रोत

2012-09-10 09:13:43 Jeroen

आप को यह जोड़ने की कोशिश सीएसएस:

td { 
    display: table-row; 
}

चीयर्स।

स्रोत

2012-09-10 09:23:47 George

हालांकि यह एक साफ समाधान है आईई इसे प्रदर्शित करने में विफल रहेगा। – easwee

नोड। यह यानी 7 या उससे कम पर काम नहीं करेगा। :) – George

एनओपी - किसी भी आईई में काम नहीं करता - यहां तक कि 9. – easwee

बस; नहीं। आप कुछ जावास्क्रिप्ट के बिना एक पंक्ति को 2-कॉलम तालिका को 1-कॉलम तालिका में बदल नहीं सकते हैं।
या तो तालिका के कोडर को इस तरह से बनाने के लिए बताएं, या तालिका को दोबारा बनाने के लिए बस जावास्क्रिप्ट का उपयोग करें।

स्रोत

2012-09-10 09:32:31

किसी भी तालिका का उपयोग करते हुए भी खराब कोडिंग का उल्लेख नहीं करना चाहिए। – easwee

आप display:block; का उपयोग कर कुछ हासिल कर सकते हैं। http://jsfiddle.net/R53KH/

स्रोत

2012-09-10 09:43:52 starbeamrainbowlabs

एकमात्र समाधान मैं की है सोच सकते हैं, अपने मार्कअप बदल रहा है:

इस बेला देखें। मैं इसे एक कॉलम लेने और इसे मार्कअप में एक पंक्ति के रूप में लिखने के लिए इस तरह से बदल दूंगा।यहां एक पहेली है जिसे मैंने बनाया है: http://jsfiddle.net/MHsxU/

स्रोत

2012-09-10 09:44:28

अभी भी समस्याएं हैं और क्रोम में?

उन लोगों के लिए अभी भी समस्याएं हैं (जैसे मेरी) जांच करें कि आपके दस्तावेज़ के प्रमुख में <!DOCTYPE html> है। यदि आप क्रोम नहीं जोड़ते हैं तो आप जो भी जोड़ते हैं उसे पूरी तरह से अनदेखा करते हैं और display: table-cell रखते हैं।

स्रोत

2016-02-11 17:17:38 timtom

मुझे हाल ही में इसी तरह की समस्या का सामना करना पड़ा था & एक अच्छा समाधान मिला है। अक्सर गलत उपयोग के कारण टेबल्स में खराब रैप होता है, लेकिन वे चरम चौड़ाई व्यूपोर्ट में डेटा के ग्रिड को प्रदर्शित करने की आवश्यकता होने पर वास्तव में सबसे कम विकल्प हैं।

मूल प्रश्न का उत्तर अभी भी नहीं है। जावास्क्रिप्ट के बिना इस समस्या को हल करने के लिए, तालिका मार्कअप को संपादित करने में सक्षम होना चाहिए।

टेबल्स देख सकते हैं ... ठीक है ... जब चौड़ा हो गया, लेकिन squished जब बस भयानक लग रहा है। "उत्तरदायी" सारणी केवल प्रत्येक सेल में प्रासंगिक मार्कअप जोड़कर संभव होती है (उदा। span.label & span.data तत्व)। हम डिफ़ॉल्ट रूप से & द्वारा इस नए अनावश्यक आउटपुट को आसानी से छुपा सकते हैं केवल उत्तरदायी दृश्य स्थिति में इसे दिखाएं।

table.responsive td .label { 
 
    display: none; 
 
}

<table class="responsive"> 
 
    <thead> 
 
     <tr> 
 
      <th>Column Foo</th> 
 
      <th>Column Bar</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td><span class="label">Column Foo</span><span class="data">Baz</span></td> 
 
      <td><span class="label">Column Bar</span><span class="data">Qux</span></td> 
 
     </tr> 
 
    </tbody> 
 
</table>

जब एक संवेदनशील दृश्य राज्य में, thead तत्व & छिपाने .label तत्वों दिखा।

table.responsive { 
 
    width: 100%; 
 
} 
 
table.responsive td .label { 
 
    display: none; 
 
} 
 

 
table.responsive th { 
 
    background-color: #ddd; 
 
} 
 

 
table.second { 
 
    margin-top: 5em; 
 
} 
 

 
@media screen and (max-width:640px) { 
 
    table.responsive thead { 
 
    display: none; 
 
    } 
 
    table.responsive tbody th, 
 
    table.responsive tbody td { 
 
    display: block; 
 
    } 
 

 
    table.responsive td span { 
 
    display: block; 
 
    } 
 
    table.responsive td .label { 
 
    background-color: #ddd; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    } 
 
}

मैं एक repo जो अधिक विस्तार में समाधान को शामिल किया गया बना लिया है। इसे काम देखने के लिए here पर क्लिक करें।

स्रोत

2016-08-27 06:13:35 yesnoio

केवल एचएसएस और कोई जावास्क्रिप्ट

उत्तर

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