2 टेबलों को एक ही कॉलम आकार बनाएं

Question

मेरे पास 2 HTML टेबल हैं जो सीधे एक दूसरे के शीर्ष पर हैं। प्रत्येक तालिका में कॉलम की एक ही संख्या होती है, लेकिन उनमें शामिल पाठ भिन्न हो सकता है। और प्रत्येक तालिका में कई पंक्तियां हो सकती हैं। मैं इन 2 टेबलों के लिए सटीक समान कॉलम चौड़ाई रखना चाहता हूं ताकि कॉलम हमेशा लाइन हो जाएं। मुझे कोई फर्क नहीं पड़ता कि कॉलम के भीतर पाठ जितना आवश्यक हो उतना लपेटता है। और मैं सभी पंक्तियों को अन्य कारणों से एक ही तालिका में संयोजित नहीं कर सकता।

क्या ऐसा करने का कोई तरीका है?

ध्यान दें कि इस समाधान को केवल फ़ायरफ़ॉक्स और आईई के अंतिम 2 संस्करणों में काम करना है।

Answer 1

जहाँ तक मुझे पता है कि आप दो तालिकाओं के कॉलम को संरेखित नहीं कर सकते हैं।

आप एक टेबल बना सकते हैं और इसे दो की तरह दिखने के लिए सीएसएस का उपयोग कर सकते हैं।

<table> 
    <tr> <!-- First table header --> </tr> 
    <tr> <!-- First table rows... --></tr> 
    <tr> <!-- First table footer... --></tr> 
    <tr> <!-- Empty space between tables --> </tr> 
    <tr> <!-- Second table header --> </tr> 
    <tr> <!-- Second table rows... --></tr> 
    <tr> <!-- Second table footer... --></tr> 
</table> 

Answer 2

मैं आपके कॉलम पर प्रतिशत चौड़ाई का उपयोग करने का सुझाव देता हूं, यह सुनिश्चित कर रहा हूं कि उन चौड़ाई हमेशा 100% तक बढ़ जाए।

<style type="text/css"> 
    table { width: 100%; } 
    td.colA { width: 30%; } 
    td.colB { width: 70%; } 
</style> 

<table> 
    <tr> 
    <td class="colA">Lorem ipsum</td> 
    <td class="colB">Lorem ipsum</td> 
    </tr> 
</table> 

<table> 
    <tr> 
    <td class="colA">Lorem ipsum</td> 
    <td class="colB">Lorem ipsum</td> 
    </tr> 
</table> 

Answer 3

टेबल कोशिकाओं, स्वभाव से द्रव रहे हैं, ताकि बस HTML/CSS में संभव नहीं है जब तक आप कॉलम निश्चित चौड़ाई (फिक्स्ड निश्चित रूप से भी एक प्रतिशत हो सकता है) देते हैं।

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

Answer 4

मुझे आईई 9, क्रोम 14 और फ़ायरफ़ॉक्स 8 पर मेरी वेबसाइट के लिए एक ही स्थिति तय की गई है जिसमें है मेरी तालिका में चार कॉलम हैं, अजीब वाले लेबल हैं और यहां तक ​​कि इनपुट भी शामिल हैं। मेरे पास मेरे पृष्ठ पर चार टेबल हैं और प्रत्येक तालिका के सभी कॉलम लंबवत रूप से गठबंधन हैं। आशा है कि इन चरणों का शायद आकार 1x1 की मदद मिलेगी

1- डाउनलोड कहीं से भी एक पारदर्शी छवि है, ताकि आप अपने आकार अपने जरूरत के अनुसार (यकीन नहीं करता है, तो एक छवि सीएसएस द्वारा भी सिकुड़ जा सकता है)

समायोजित कर सकते हैं 2- आपकी तालिका परिभाषित के रूप में

<table class="formed"> 
      <tr> 
       <th class="colLabel"></th> 
       <th class="colField"></th> 
       <th class="colLabel"></th> 
       <th class="colField"></th> 
      </tr> 
     <tr> 
      <td></td> 
[now rest of your columns row by row] 

3-

.colLabel 
{ 
    text-align:right; 
    padding-right:0em; 
    height:auto; 
    background-image:url(Resources/Images/transparent.gif); 
    background-repeat:no-repeat; 
    width:8em; 
} 
.colField 
{ 
    text-align:left; 
    padding-right:0em; 
    height:auto; 
    background-image:url(Resources/Images/transparent.gif); 
    background-repeat:no-repeat; 
    width:20em; 
} 

.formed 
{ 
    width:90%; 
    table-layout:fixed; 
    padding:0; 
    margin:0; 
}