Skip to main content

TABLE WITH BORDER AND RESPONSIVE(PROBLEM-1)



(IF YOUR THEME IS NOT COMPATIBLE WITH CUSTOM CSS CODE BORDER WILL NOT SHOW HERE)





Header 1 Header 2 Header 3
Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3



HTML CODE

<div class="table-wrapper">
  <table>
    <tbody><tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
    <tr>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
      <td>Row 1, Column 3</td>
    </tr>
    <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
      <td>Row 2, Column 3</td>
    </tr>
  </tbody></table>
</div>
  


CSS CODE

.table-wrapper {
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
  background-color: transparent;
  border: 1px solid #dee2e6;
}

th,
td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}

@media (max-width: 575.98px) {
  .table-wrapper {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
}

एक सीमा के साथ एक तालिका बनाने के लिए आप उत्तरदायी है, आप निम्न HTML और CSS कोड का उपयोग कर सकते हैंः
इस कोड में, हमने टेबल के चारों ओर एक रैपर div जोड़ा है, जो इसे उत्तरदायी होने की अनुमति देता है। CSS कोड सीमा और पैडिंग सहित तालिका के गुणों को परिभाषित करता है, और यह सुनिश्चित करने के लिए 100% की अधिकतम चौड़ाई निर्धारित करता है कि तालिका हमेशा छोटी स्क्रीन पर पूरी तरह से दिखाई दे।

CSS कोड के तल पर आप अतिरिक्त शैलियों को लागू करती है जब स्क्रीन की चौड़ाई 576 पिक्सेल से कम होती है, जो टेबल को छोटी स्क्रीन पर क्षैतिज रूप से स्क्रॉल करने की अनुमति देती है।

इस कोड को अपने ब्लॉगर पोस्ट के HTML और CSS संपादकों में कॉपी और पेस्ट करें, और नमूना डेटा को अपनी सामग्री के साथ बदलें।




HOW TO ADD UPPER CODE IN BLOG POST








अपने ब्लॉगर पोस्ट के लिए सीमाओं और जवाबदेही के साथ एक तालिका जोड़ने के लिएः

ब्लॉगर पोस्ट एडिटर खोलें और HTML मोड पर स्विच करें।

तालिका के लिए HTML कोड को उस संपादक में कॉपी और पेस्ट करें जहां आप तालिका को प्रदर्शित करना चाहते हैं।

अपने ब्लॉगर थीम संपादक के "कस्टम CSS" अनुभाग में CSS कोड को कॉपी और पेस्ट करें।

यह सुनिश्चित करने के लिए कि तालिका सही ढंग से प्रदर्शित हो रही है, अपनी पोस्ट का पूर्वावलोकन करें।

जब आप तालिका की उपस्थिति से संतुष्ट हों तो अपनी पोस्ट प्रकाशित करें।

ध्यान दें कि यदि आप तालिका की उपस्थिति में परिवर्तन करना चाहते हैं, तो आपको तदनुसार HTML और CSS कोड को संपादित करने की आवश्यकता होगी।



HOW TO GET CUSTOM CSS STEP BY STEP 


अपने ब्लॉगर थीम में कस्टम CSS जोड़ने के लिए, इन चरणों का पालन करेंः

अपने Blogger Dashboard पर जाएं और बाएं हाथ के मेनू से "Theme" विकल्प पर क्लिक करें।

उस थीम के बगल में "अनुकूलित करें" बटन पर क्लिक करें जिसे आप संपादित करना चाहते हैं।

बाएं हाथ के मेनू में, "उन्नत" विकल्प पर क्लिक करें।

नीचे स्क्रॉल करें "CSS" अनुभाग जोड़ें।

CSS कोड को कॉपी करें जिसे आप अपनी थीम में जोड़ना चाहते हैं।

कोड को "CSS जोड़ें" बॉक्स में पेस्ट करें।

अपने परिवर्तनों को सहेजने के लिए "ब्लॉग पर लागू करें" बटन पर क्लिक करें।

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






DON'T GET A BORDER ON THE UPPER CODE


यदि आप अपने ब्लॉगर पोस्ट में HTML और CSS कोड जोड़ने के बाद टेबल पर सीमा नहीं देख रहे हैं, तो कुछ चीजें हो सकती हैं जो समस्या का कारण बन सकती हैं। यहां कुछ संभावित समाधान दिए गए हैंः

जांचें कि CSS कोड ठीक से आपके विषय में जोड़ा गया हैः सुनिश्चित करें कि आपने अपने ब्लॉगर थीम के सही अनुभाग में CSS कोड जोड़ा है, विशेष रूप से "कस्टम CSS" अनुभाग। जांचें कि कोड ठीक से स्वरूपित और सहेजा गया है।

जांचें कि HTML कोड ठीक से स्वरूपित है: सुनिश्चित करें कि तालिका के लिए HTML कोड ठीक से स्वरूपित है और सीमा के लिए आवश्यक गुण शामिल हैं, जैसे बॉर्डर-कोलाज और बॉर्डर।

जांचें कि अन्य CSS कोड द्वारा सीमा को ओवरराइड नहीं किया जा रहा हैः यदि आपके ब्लॉग पर अन्य CSS कोड है जो सीमा स्टाइल के साथ परस्पर विरोधी हो सकता है, तो अस्थायी रूप से किसी अन्य कस्ट को हटाने का प्रयास करें


Labels:

Comments

Post a Comment

Popular posts from this blog

RESPONSIVE TABLE CODE FOR BLOGGER TESTED

Steps to add this HTML CSS Responsive Grid Layout to your blogger post. Steps to add images to HTML CSS Responsive Grid Layout Generator for blogger post. Steps to add this HTML CSS Responsive Grid Layout to your blogger post. Go to your blogger dashboard and click on the new post. Create and design content for the first cell. After creating and styling the content for the first cell, click on Html Tab. Copy the content available in the HTML editor (Ctrl+A and Ctrl+C). Then come back to this site, click on Cell then paste the copied code into cell1. Repeat the same procedure for all cells. After creating content for all cells, customize the design for a responsive layout. Then copy the generated code and go back to your post editor. Click on the HTML tab then paste the copied code. Publish and view the post. Simple Grid Responsive Template will be added to your blogger post. Steps to add images to HTML CSS Responsive Grid Layout Generator for blogger post. Go to your blogger dashboard ...
Post a Comment
Read more

HOW TO ADD CSS CODE IN BLOG THEME CSS COUSTOM

  अपने ब्लॉगर पोस्ट के लिए सीमाओं और जवाबदेही के साथ एक तालिका जोड़ने के लिएः ब्लॉगर पोस्ट एडिटर खोलें और HTML मोड पर स्विच करें। तालिका के लिए HTML कोड को उस संपादक में कॉपी और पेस्ट करें जहां आप तालिका को प्रदर्शित करना चाहते हैं। अपने ब्लॉगर थीम संपादक के "कस्टम CSS" अनुभाग में CSS कोड को कॉपी और पेस्ट करें। यह सुनिश्चित करने के लिए कि तालिका सही ढंग से प्रदर्शित हो रही है, अपनी पोस्ट का पूर्वावलोकन करें। जब आप तालिका की उपस्थिति से संतुष्ट हों तो अपनी पोस्ट प्रकाशित करें। ध्यान दें कि यदि आप तालिका की उपस्थिति में परिवर्तन करना चाहते हैं, तो आपको तदनुसार HTML और CSS कोड को संपादित करने की आवश्यकता होगी। HOW TO GET CUSTOM CSS TEACH ME STEP BY STEP HOW TO PASTE IT THERE अपने ब्लॉगर थीम में कस्टम CSS जोड़ने के लिए, इन चरणों का पालन करेंः अपने Blogger Dashboard पर जाएं और बाएं हाथ के मेनू से "Theme" विकल्प पर क्लिक करें। उस थीम के बगल में "अनुकूलित करें" बटन पर क्लिक करें जिसे आप संपादित करना चाहते हैं। बाएं हाथ के मेनू में, "उन्नत" विकल्प पर क्लिक...
Post a Comment
Read more