एक दूसरे के साथ 2 टेबल कॉलम चौड़ाई संरेखित करें

Question

मेरे पास 2 टेबल एक दूसरे के शीर्ष पर हैं और मैं अपनी कॉलम चौड़ाई को एक-दूसरे के साथ संरेखित करना चाहता हूं, क्या ऐसा करने का कोई तरीका है? की कोशिश की तय तालिका स्तंभ चौड़ाई आदि कोई खुशी

आप बेला पर देख सकते हैं कॉलम एक दूसरे को http://jsfiddle.net/askhe/

एचटीएमएल बंद थोड़ा हैं

<table class="tblresults txtblack"> 
          <tr class="tblresultshdr bold"> 
           <td class="col1">Company</td> 
           <td>Currency</td> 
           <td>Bid</td> 
           <td>Ask</td> 
           <td>YTD Vol</td> 
          </tr> 
          <tr> 
           <td class="col1">ABC</td> 
           <td>GBP</td> 
           <td>94</td> 
           <td>16</td> 
           <td>3,567,900</td> 
          </tr> 
          <tr> 
           <td class="col1">DEF</td> 
           <td>GBP</td> 
           <td>3</td> 
           <td>46</td> 
           <td>10,000</td> 
          </tr> 
          <tr> 
           <td class="col1">GHI</td> 
           <td>GBP</td> 
           <td>3</td> 
           <td>46</td> 
           <td>10,000</td> 
          </tr> 
          <tr> 
           <td class="col1">JKLM</td> 
           <td>GBP </td> 
           <td>7</td> 
           <td>46</td> 
           <td>56,000</td> 
          </tr> 

</table> 
         <table class="tblresults txtblack margintop10"> 
          <tr> 
           <td colspan="5" class="bold" >Investments</td> 
          </tr> 
          <tr> 
           <td class="col1">ghjk</td> 
           <td>GBP</td> 
           <td>13</td> 
           <td>6</td> 
           <td>130,000</td> 
          </tr> 
          <tr> 
           <td class="col1">asdsa</td> 
           <td>GBP</td> 
           <td>120</td> 
           <td>46</td> 
           <td>16,000</td> 
          </tr> 
          <tr> 
           <td class="col1">dfdsfsdf </td> 
           <td>GBP</td> 
           <td>1</td> 
           <td>4</td> 
           <td>13,000</td> 
          </tr> 
         </table>​ 

सीएसएस

table.tblresults { 
    width:100%; 
    *width:99.5%; 
    border: 1px solid #b9b8b8; 
    top: 0; 
} 
table.tblresults tr.tblresultshdr {background: lightgrey;} 
table.tblresults tr.tblresultshdr td {padding: 6px;} 
table.tblresults td {padding: 8px; border: 1px solid #b9b8b8;} 
table.tblresults td.col1 {width: 70%;} 
​ 

Answer 1

table तत्वों जहां मतलब वैज्ञानिक डेटा के लिए, जैसे कि प्रयोगों से जांच, वास्तविक लेआउट के लिए नहीं:

टेबल्स को लेआउट दस्तावेज़ सामग्री के साधन के रूप में पूरी तरह से उपयोग नहीं किया जाना चाहिए क्योंकि यह गैर-दृश्य मीडिया को प्रस्तुत करते समय समस्याएं पेश कर सकता है। इसके अतिरिक्त, जब ग्राफिक्स के साथ इस्तेमाल किया, इन तालिकाओं उपयोगकर्ताओं क्षैतिज स्क्रॉल करने के लिए एक बड़ा प्रदर्शन के साथ एक सिस्टम पर तैयार किया गया एक टेबल देखने के लिए मजबूर हो सकता है। इन समस्याओं को कम करने के लिए, लेखकों को टेबल की बजाय लेआउट को नियंत्रित करने के लिए स्टाइल शीट का उपयोग करना चाहिए।

जबकि आप लेआउट के लिए उनका उपयोग नहीं कर रहे हैं, तो आपकी समस्या वास्तव में एक प्रतिपादन/लेआउट समस्या है। इसका सबसे आसान समाधान merge both tables into one (jsfiddle) है।

यदि आप अपने डेटा को एक विशाल तालिका के बजाय कई छोटी तालिकाओं में encapsulated करना पसंद करते हैं तो आपको लगभग सभी कॉलम के लिए चौड़ाई निर्दिष्ट करने की आवश्यकता होगी।

Answer 2

क्यों नहीं उन्हें एक ही तालिका में डाल दिया? ऐसा लगता है कि वे अर्थात् समान हैं। http://jsfiddle.net/askhe/5/

Answer 3

हालांकि मैं मानता हूँ कि टेबल विलय करने के लिए समाधान के लिए सबसे अच्छा है और कई मामलों में एक सरलतम है, मैं सच में समान कॉलम के साथ यह 2 अलग-अलग तालिकाओं की जरूरत के लिए आया था (एक तालिका सही और 2 बनाने के लिए स्क्रॉल)

कि प्राप्त करने के लिए, मैं

बिना स्तंभों की एक ही नंबर के साथ 2 टेबल, चौड़ाई नियम (% और पिक्सल) के साथ एक, एक घोषित

फिर, जावास्क्रिप्ट के साथ, मैं करने के लिए फैसला सुनाया तालिका की चौड़ाई लागू किया मुफ़्त एक:

document.getElementById("HeaderTable").style.width = document.getElementById("main").clientWidth ; 
document.getElementById("tar1").style.width = document.getElementById("org1").clientWidth ; 
document.getElementById("tar2").style.width = document.getElementById("org2").clientWidth ; 
document.getElementById("tar3").style.width = document.getElementById("org3").clientWidth ; 
document.getElementById("tar4").style.width = document.getElementById("org4").clientWidth ; 

पहली पंक्ति तालिका चौड़ाई को ठीक करती है, फिर कॉलम द्वारा कॉलम किया जाता है। .clientWidth का उपयोग करना महत्वपूर्ण है, क्योंकि .style.width शासित कॉलम पर लागू होने पर प्रतिशत भेजता है।

यह लगभग काम कर रहा था, लेकिन काफी नहीं। तालिका में एक समान लेआउट था, लेकिन कुछ पिक्सेल द्वारा स्थानांतरित किया गया था। जैसा कि मैंने केवल जरूरत है कि IE में काम करने, मैं हालांकि मैं चल सकता है कि तय मूल्यों के साथ, मैं चाहता था के रूप में अधिक से अधिक निकट है, इसलिए मैं अपने कोड बदलने: मैं मान लगता

document.getElementById("tar1").style.width = document.getElementById("org1").clientWidth - 9; 
document.getElementById("tar2").style.width = document.getElementById("org2").clientWidth ; 
document.getElementById("tar3").style.width = document.getElementById("org3").clientWidth - 10; 
document.getElementById("tar4").style.width = document.getElementById("org4").clientWidth - 10; 

एक अलग मेज के लिए अलग हो सकता है। लेकिन मुझे आश्चर्य हुआ कि यह ज़ूम स्तर

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

यहां कुछ jsfiddle है, क्योंकि कुछ सीएसएस शामिल हैं। फिलहाल यह ज़ूम पर काम नहीं करता है, क्योंकि मेरा फ़्लोटिंग हेडर right: 0px तक नहीं टिकता है, पता नहीं क्यों अभी तक

Answer 4

ठीक है, इस सरल HTML स्निपेट का उपयोग करके आप इसे कर सकते हैं। मेरे मामले में मैं एचटीएमएल से पीडीएफ बना रहा था, इसलिए यह समाधान मेरे लिए काम करता था। उम्मीद है कि यह किसी और की मदद करेगा। तो आप (यदि आप चाहें या प्रतिशत) स्तंभों के लिए आनुपातिक चौड़ाई का उपयोग कर सकते

<table border=0> 
    <tr> 
    <td> 
     <!--Insert table 1 --> 
    </td> 
    <td> 
     <!--Insert table 2 --> 
    </td> 
    </tr> 
</table>