आकार बदलने के दौरान आप दो तालिकाओं की कॉलम चौड़ाई को सिंक में कैसे रखते हैं?

Question

मैंने थोड़ा सा देखा है और एक सभ्य समाधान नहीं ढूंढ रहा है, जिसके लिए निम्न समस्या के लिए कुछ पागल जावास्क्रिप्ट की आवश्यकता नहीं है।

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

क्या शुद्ध सीएसएस के साथ इसे पूरा करने का कोई तरीका है? यह बिल्कुल सही नहीं होना चाहिए, बस जब तक यह सभ्य दिखता है, मुझे बस इतना ही चाहिए।

Answer 1

केवल सीएसएस में निश्चित रूप से करने योग्य। बस दोनों टेबल, trs, और tds पर चौड़ाई निर्धारित करें, शब्द-रैपिंग लागू करें, और निश्चित रूप से तालिका-लेआउट सेट करें। यह अंतिम सेटिंग सेल सामग्री की चौड़ाई द्वारा निर्धारित किए जाने के बजाय परिभाषित कॉलम चौड़ाई का उपयोग करती है।

#tb1 {  width: 80%;  } 
 

 
#tb2 {  width: 80%;  } 
 

 
#tb1 tr {  width: 100%;  } 
 

 
#tb2 tr {  width: 100%;  } 
 

 
.col1 {  width: 35%;  } 
 
.col2 {  width: 35%;  } 
 
.col3 {  width: 20%;  } 
 
.col4 {  width: 10%;  } 
 

 
#tb1, #tb2 {  table-layout: fixed;  } 
 
#tb1 td, #tb2 td {  word-wrap: break-word;  }

<table id="tb1" border="1"> 
 
    <tr> 
 
    <td class="col1">Title 1</td> 
 
    <td class="col2">Title 2</td> 
 
    <td class="col3">Title 3</td> 
 
    <td class="col4">Title 4</td> 
 
    </tr> 
 
</table> 
 

 
<table id="tb2" border="1"> 
 
    <tr> 
 
    <td class="col1">Content 00001</td> 
 
    <td class="col2">Content 02</td> 
 
    <td class="col3">Content 0000000000003</td> 
 
    <td class="col4">Content 000000000000000000004</td> 
 
    </tr> 
 
</table>

Answer 2

यह Jquery का उपयोग करके अवधारणा का एक नमूना है। (आप इसे वेनिला कर सकते हैं, लेकिन आवश्यकता अधिक कोड)

<table id="tb1" border="1"> 
     <tr> 
      <td>Title 1</td> 
      <td>Title 2</td> 
      <td>Title 3</td> 
      <td>Title 4</td> 
     </tr> 
    </table> 

    <table id="tb2" border="1"> 
     <tr> 
      <td>Content 00001</td> 
      <td>Content 02</td> 
      <td>Content 0000000000003</td> 
      <td>Content 000000000000000000004</td> 
     </tr> 
    </table> 

जे एस:

function SetSize() { 
    var i = 0; 
    $("#tb2 tr").first().find("td").each(function() { 
     $($("#tb1 tr").first().find("td")[i]).width(
      $(this).width() 
     ); 
     i++; 
    }); 
} 
$(window).resize(SetSize); 
SetSize(); 

नहीं "पागल जावास्क्रिप्ट": डी
यहाँ एक काम बेला है, कुछ सीएसएस के साथ यह देखने के लिए बनाने के लिए बेहतर: http://jsfiddle.net/5mfVT/

Answer 3

तालिकाएं जितनी छोटी हो सके आकार बदलती हैं। आपके हेडर की तालिका में संकुचित सामग्री है और इसलिए आकार बदलने के लिए जब्त करने से पहले छोटी चौड़ाई में आकार बदल सकता है।
गैर-जावास्क्रिप्ट समाधान या तो अपने सभी कॉलम के लिए चौड़ाई को परिभाषित करना है या min-width अपनी तालिकाओं को परिभाषित करना है जो दो न्यूनतम चौड़ाई के बड़े फिट बैठते हैं।