मैं वर्तमान में एक स्क्रिप्ट पर काम कर रहा हूँ जो एक डेटाबेस से एक तालिका बनाता है (चुनाव परिणाम प्रदर्शित करने के लिए)।
मैं चाहता हूं कि कुछ हिस्से (प्राइमरी के लिए) ढह जाएं (और संबंधित बटन पर क्लिक करने पर ही खोला जाए)।

यहां मेरे द्वारा उपयोग किए जा रहे जावास्क्रिप्ट कोड का एक भाग है:

// Previous candidates in the loop
row +=
  '<tr><td colspan="3" style="text-align:center;" onclick="toggler(this.parentNode.parentNode.nextSibling);">';
row += PartyName(candidate.getAttribute("party")) + " primaries ▼"; // The display button
row += "</td></tr>";
row += '<tbody class="collapsible" style="display:block;">';
// Code running through the primaries candidates to display them
row += "</tbody>";
// Next candidates in the loop

टॉगलर फ़ंक्शन:

function toggler(item) {
  if (item.style.display == "none") {
    item.style.display = "block";
  } else {
    item.style.display = "none";
  }
}

यहां तालिका वर्तमान में कैसी दिखती है: बॉडी में सब कुछ केवल 1 कॉलम की चौड़ाई में फिट बैठता है बाईं ओर की छवियां कोई समस्या नहीं हैं (मुझे बस उन्हें फ़ाइल में जोड़ने की आवश्यकता है)। समस्या, जैसा कि आप देख रहे हैं, यह है कि tbody केवल 1 कॉलम की चौड़ाई में फिट बैठता है। मैं यह कैसे तय करुं?

1
Julio974 5 जिंदा 2020, 21:14

1 उत्तर

सबसे बढ़िया उत्तर

मुझे लगता है कि एक तालिका तत्व के लिए display: block को परिभाषित करने से सामान्य तालिका गुण अप्रचलित हो जाएंगे, इसलिए मुझे लगता है कि आपको display: block/none के बजाय height: 0 बनाम height: auto का उपयोग करना चाहिए, साथ ही overflow-y: hidden ऊंचाई शून्य होने पर प्रदर्शन को काटने के लिए।

0
Johannes 5 जिंदा 2020, 18:21