सिंक्रनाइज़ किए जा रहे स्तंभ चौड़ाई, आदि

Question

कारण जो कुछ हद तक अपरिहार्य हैं मैं निम्नलिखित समस्या है (विरासत कोड, संगतता, डिजाइन की जरूरत के बहुत सारे) के लिए: मैं दो टेबल, सीधे अन्य नीचे एक है , लेकिन दो फ्रेम के बीच विभाजित (मेरे एसआईजी के नीचे छद्म उदाहरण देखें)। मुझे इन तालिकाओं की कॉलम चौड़ाई को सिंक्रनाइज़ करने के लिए बिल्कुल ठीक करने की आवश्यकता है ताकि ये दो टेबल 'एक्ट' एक जैसा हो। 'हेडर' टेबल होने का कारण जो 'डेटा' तालिका से ऊपर स्क्रॉल नहीं करेगा जो स्क्रॉल कर सकता है।

अब कुछ स्पष्ट सुझाव हैं जो अभी तक काम नहीं करते हैं।

सबसे पहले, मैंने सुना है कि सीएसएस का उपयोग करके टेबल पंक्तियों पर स्क्रॉलबार डालने का एक तरीका है, टेबल हेडर नहीं, जो यहां इच्छित प्रभाव है। दुर्भाग्यवश, ऊपर उल्लिखित कारणों के कारण यह व्यवहार्य विकल्प नहीं है।

कॉलम पर दूसरा, प्रतिशत चौड़ाई स्वरूपण। दुर्भाग्य से स्क्रॉलबार इसे गड़बड़ कर देगा, और यह समाधान अगले संभावित समाधान के साथ एक समस्या भी साझा करता है: पिक्सेल चौड़ाई स्वरूपण। यहां, यदि कॉलम सामग्री है जो अतिरिक्त चौड़ी है तो इन चौड़ाई (पीएक्स या%) को एक टेबल में ओवरराइड किया जाएगा, लेकिन दूसरा नहीं, और एक मिस्चैचिंग चौड़ाई टूट जाएगी-लंबवत संरेखण। स्पष्ट रूप से इसे एक सीएसएस 'अधिकतम-चौड़ाई' के साथ सही करने के लिए काम नहीं लगता है।

अंतिम संभावित समाधान समस्या को गतिशील रूप से बल देने के लिए किसी प्रकार की जावास्क्रिप्ट और डोम का उपयोग कर रहा है। यहां प्रत्येक कॉलम पर एक न्यूनतम चौड़ाई को मजबूर करना और शीर्ष चौड़ाई को ओवरराइड करने के लिए नीचे की चौड़ाई को मजबूर करना पर्याप्त होगा। फिर भी, एक ही कॉलम/पंक्ति मॉडल साझा करते समय वास्तव में दो में एक तालिका को विभाजित करने की क्षमता काफी साफ होगी। उम्मीद है कि यह समाधान व्यवहार्य है और बेहद जटिल नहीं है (मेरे वर्तमान ज्ञान आरई जावास्क्रिप्ट/डीओएम की कमी है)।

धन्यवाद,

Skolem

<!-- In frame 1 (top, non-scrolling): --> 
<table id="t1" ...> (Just the header, really) 
    <tr> 
    <td>Name</td><td>User Image</td><td>Email</td><td>Favorite Language</td> 
    </tr> 
</table> 

<!-- In frame 2 (bottom, scrolling): --> 
<!-- table "t2" intended to have equal column widths --> 
<table id="t2" ...> (Data below the header) 
    <tr> 
    <!-- Lots of crazy stuff of wildly varying widths --> 
    <td>...</td><td>...</td><td>...</td><td>...</td> 
    </tr> 
</table> 

Answer 1

पहले, t2 की चौड़ाई को t1 की चौड़ाई निर्धारित किया है। फिर, टी 1 से प्रत्येक टीडी लें, और इसकी चौड़ाई टी 2 के कॉलम की चौड़ाई से मेल करें।

अवधारणा के इस सबूत को आजमाएं: http://jsfiddle.net/HqpGp/।

आपको jQuery की आवश्यकता होगी, और इसे फ्रेम के साथ काम करने के लिए संशोधित करें, लेकिन मुझे लगता है कि यह एक अच्छी शुरुआत है। मुझे पूरा यकीन है कि जेएस भाग को एक अच्छे तरीके से लिखा जा सकता है, हालांकि।

उम्मीद है कि यह मदद करता है!

Answer 2

मुझे सीधे काम करने के लिए स्वीकार्य उत्तर नहीं मिला, इसलिए मैंने इसे थोड़ा सा काम किया, बस अगर यह किसी और के लिए काम नहीं करता है।

$('.table1 tr:eq(1) td').each(function (i) { 
       var _this = $(this); 
       $('.table2 tr:eq(1) td:eq(' + i + ')').width(_this.width()); 
      });