मैं तालिका बनाना चाहता हूं जहां प्रत्येक <td> में एक div होता है जो विस्तार कर सकता है लेकिन समस्या यह है कि तालिका पंक्ति div के साथ विस्तारित नहीं होती है। नीचे मेरा उदाहरण कोड है:

document.querySelector('.expand').addEventListener('click', () => {
  let additionalInfo = document.querySelector('.additional-info');
  if (additionalInfo.style.display === 'none') {
    additionalInfo.style.display = "block";
    additionalInfo.style.maxHeight = additionalInfo.scrollHeight + "px";
  } else {
    additionalInfo.style.display = "none";
    additionalInfo.style.maxHeight = 0 + "px";
  }
});
.main-info {
  width: 650px;
  height: 150px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.additional-info {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  display: none;
}
<div>
  <div>
    <input type="text"></input>
  </div>
  <div>
    <table>
      <tr>
        <td>
          <div class="main-info">
            <div class="expand">Expand</div>
            Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
            <div class="additional-info">
              Some additional Information!<br> Some additional Information!<br> Some additional Information!<br> Some additional Information!<br> Some additional Information!<br> Some additional Information!<br> Some additional Information!<br> Some additional
              Information!<br> Some additional Information!
            </div>
          </div>
        </td>
      </tr>


      <tr>
        <td>
          <div class="main-info">
            <div class="expand">Expand</div>
            Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
            <div class="additional-info">
              Some additional Information!<br> Some additional Information!<br> Some additional Information!<br> Some additional Information!<br> Some additional Information!<br> Some additional Information!<br> Some additional Information!<br> Some additional
              Information!<br> Some additional Information!
            </div>
          </div>
        </td>
      </tr>


    </table>
  </div>
</div>

यहाँ टीडी तत्व है:

<td>
    <div class="main-info">
        <div class="expand">Expand</div>
        Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
    <div class="additional-info">
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!
    </div>
    </div>
</td>

मूल रूप से, जब additional-info div दृश्यमान हो जाता है, तो यह अगली पंक्ति की सामग्री के साथ ओवरलैप हो जाता है। मैंने देखा कि यदि additional-info div main-info का हिस्सा नहीं है, लेकिन td के अंदर अपने तत्व के रूप में जोड़ा गया है, तो पंक्ति अच्छी तरह से फैलती है:

<td>
    <div class="main-info">
        <div class="expand">Expand</div>
        Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
    </div>

    <!-- additional-info is separate from main-info -->
    <div class="additional-info">
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!
    </div>
</td>

क्या ऐसा ही व्यवहार पाने का कोई तरीका है लेकिन additional-info div को main-info div के हिस्से के रूप में रखें? मैं jQuery जैसे अतिरिक्त पुस्तकालयों का उपयोग नहीं करना चाहता, बस वेनिला जेएस एचटीएमएल/सीएसएस के साथ।

3
oneCoderToRuleThemAll 19 जिंदा 2020, 22:11

1 उत्तर

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

से वर्ग मुख्य-जानकारी बदलें

.main-info {
    width: 650px;
    height: 150px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

प्रति

.main-info {
    width: 650px;
    min-height: 150px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

और कर्नल अच्छी तरह से विस्तार करेगा

2
pixelquadrat 19 जिंदा 2020, 22:22