मैं तालिका के तत्वों को इसके शीर्षलेख के साथ संरेखित करने का प्रयास कर रहा हूं। मैंने टेबल हेड और बॉडी को दो घटकों में विभाजित किया है (जैसा कि मैं हेडर के संचालन को संचालित करना चाहता हूं, शरीर को अप्रभावित रखना)। यहां बताया गया है कि यह कैसा दिखता है: यहां छवि विवरण दर्ज करें

हालांकि दोनों निकाय अलग-अलग हैं, क्या हेडर के अनुसार बॉडी स्पेस को संरेखित और आरक्षित करने का कोई तरीका है। उदाहरण के लिए, विज्ञापनदाता स्तंभ तत्व उसके शीर्षलेख के मध्य संरेखित होने चाहिए। यहां codesandbox.

अगर दोनों को अलग करके नहीं किया जा सकता तो क्या कोई और तरीका है? वर्तमान में मैं हेडर के रूप में पहले तत्व [ए, बी, सी, डी] के साथ एक सरणी से इनपुट आयात कर रहा हूं और उन सभी को शरीर के रूप में बाकी कर रहा हूं।

यहाँ मेरी सीएसएस वर्ग है:

.HeadElems, .BodyElems
{
    border-left: 2 px solid black;
    padding: 0 1%;
    transition: 0.5s;
}


.HeadElems:hover
{
    cursor: pointer;
    transform: scale(1.1);
}
.Head
{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    border: 2px solid black;
    margin: 0.2% 10%;
    background-color: #41aea9;
    width: 80%;
}

.BodyRow
{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin: 0 10%;
    background-color: #e8ffff;
    width: 80%;  
}

@media screen and (max-width: 500px) {
    .Head, .BodyRow {
      margin: 0.2% 0;
    }
  }
css
0
Shivam Sahil 8 अक्टूबर 2020, 16:57

1 उत्तर

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

यदि आप एक table प्रदर्शित करना चाहते हैं, तो मुझे आपको table HTML तत्व का उपयोग करने का सुझाव देना चाहिए जो पूरी तरह से आपकी आवश्यकता के अनुरूप हो।

और आप थोड़ा सा CSS करके टेक्स्ट को आसानी से केन्द्रित कर सकते हैं:

th, td {
  text-align: center;
}
1
Agustin Moles 8 अक्टूबर 2020, 17:06