जब मैं सीएसएस डिस्प्ले विशेषता को अवरुद्ध करता हूं तो ब्लॉक और कोड में कॉलम को संरेखित कैसे किया जाता है

Question

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

यह कैसे किया जा सकता है? (सीएसएस या JQuery)

संपादित करें: - क्रोम
लक्ष्य ब्राउज़र Google है!
और थोड़ा मोड़ जोड़ना, तालिका आरटीएल है।

सीएसएस:

tbody{ 
    display: block; 
    overflow: auto; 
} 

thead, tfoot{ 
    display: block; 
} 

HTML:

<table> 
     <caption>My Table</caption> 
     <thead>  
      <tr><th>Col1</th><th>Col2</th></tr> 
     </thead> 
     <tbody>  
      <tr><td>Cell11</td><td>Cell12</td></tr> 
      <tr><td>Cell21</td><td>Cell22</td></tr> 
      <tr><td>Cell31</td><td>Cell32</td></tr> 
      <tr><td>Cell41</td><td>Cell42</td></tr> 
      <tr><td>Cell51</td><td>Cell52</td></tr> 
      <tr><td>Cell61 Is Wide</td><td>Cell62</td></tr> 
     </tbody> 
     <tfoot> 
      <tr><th>6 Rows</th><th></th></tr> 
     </tfoot>     
    </table> 

आप इसे इस jsFiddle उपयोग करने का प्रयास कर सकते हैं।

धन्यवाद और खुश रहें।

Answer 1

उपयोग जे एस या jQuery tbody की पहली पंक्ति में कोशिकाओं के offsetWidth तक पहुँचने के लिए और उसके बाद th के लिए उन लोगों के रूप स्पष्ट width शैलियों निर्धारित किया है। आप दूसरे में तत्व तक पहुंचने के लिए एक पुनरावृत्ति से इंडेक्स का उपयोग करके किसी व्यक्ति में पंक्ति को फिर से चला सकते हैं और एकजुट हो सकते हैं।

Answer 2

overflowtbody के लिए सभी ब्राउज़रों द्वारा समर्थित नहीं है !!

अद्यतन: आपको न्यूनतम निर्माण करना पड़ सकता है। हेडर के लिए दो टेबल और सामग्री के लिए एक और दूसरे को div पर डालें और overflow का उपयोग करें और आपको javascipt का उपयोग करके कॉलम चौड़ाई सिंक करना होगा।