यह एक Django शुरुआती प्रश्न है (या संभवतः केवल एक HTML समस्या है)।

मैं एक टेम्पलेट के साथ एक बहुत ही सरल HTML पृष्ठ प्रस्तुत कर रहा हूं (मैं इसे बाद में अच्छा दिखाऊंगा)। इसमें दो डिव हैं, प्रत्येक में एक हेडर और एक टेबल है। अगर मैं अपने विचार में प्रस्तुत सामग्री को प्रिंट करता हूं, तो यह सही दिखता है, लेकिन ब्राउज़र को दिए गए HTML में दोनों शीर्षक होते हैं, फिर दोनों टेबल।

टेम्पलेट

<!doctype html>
<html style=\"font-family:Helvetica\>
  <head>
    <meta charset="utf-8">
    <title>Choir Database</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="{% static 'css/choirdb.css' %}">
  </head>

 <body>
   <!-- MAIN TABLE -->
   <div>
   <h1>{{ title1 }}</h1>
   {% if value_list1 %}
   <table style=\"width:25%;font-family:Helvetica\">
   <tr/>
   {% for valuePair in value_list1 %}
     <tr><td>{{ valuePair.0 }}</td> <td>{{ valuePair.1 }}</td></tr>
   {% endfor %}
   <tr> <td><a href=\"..\">Home</a></td>
   {% else %}
     <p>No values found</p>
   {% endif %}
   </div>

   <!-- SECONDARY TABLE -->
   <div>
   <h2>{{ title2 }}</h2>
   {% if value_list2 %}
   <table style=\"width:25%;font-family:Helvetica\">
   <tr/>
   {% for valuePair in value_list2 %}
     <tr><td>{{ valuePair.0 }}</td> <td>{{ valuePair.1 }}</td></tr>
   {% endfor %}
   <tr> <td><a href=\"..\">Home</a></td>
   {% else %}
     <p>No values found</p>
   {% endif %}
   </div>
 </body>
</html>

देखें

  context = {
    'title1': 'Liturgy Detail',
    'value_list1': nameValuePairsPiece,
    'title2': 'Laudate Recommendations',
    'value_list2': rec_details,
  }
  output = render(request, 'two_tables.html', context)
  print ("output is " + str(output.content))
  return render(request, 'two_tables.html', context)

प्रिंट स्टेटमेंट वह HTML दिखाता है जिसकी मुझे उम्मीद है (न्यूलाइन जोड़ी गई) - हेडिंग 1, टेबल 1, हेडिंग 2, टेबल 2:

output is b'\n<!doctype html>\n
<html style=\\"font-family:Helvetica\\>\n 
<head>\n   
...
</head>\n\n 
<body>\n   
<!-- MAIN TABLE -->\n   
<div>\n   
<h1>Liturgy Detail</h1>\n   \n   
<table style=\\"width:25%;font-family:Helvetica\\">\n   
<tr/>\n   \n     <tr><td>Liturgy</td> <td>22B</td></tr>\n   \n     
<tr><td>Psalm</td> <td>14:2-5 r.1</td></tr>\n   \n     
<tr><td>Psalm Soft Copy</td> <td>False</td></tr>\n   \n     
<tr><td>Gospel</td> <td>Mark 7:1-8, 14-15, 21-23</td></tr>\n   \n     
<tr><td>Colour</td> <td>Green</td></tr>\n   \n     <tr><td>Notes</td> <td></td></tr>\n   \n     
<tr><td>Theme</td> <td>Word of God, justice, peace</td></tr>\n   \n   
<tr> <td><a href=\\"..\\">Home</a></td>\n   \n   </div>\n   \n   
<!-- SECONDARY TABLE -->\n   <div>\n   <h2>Laudate Recommendations</h2>\n   \n   <table style=\\"width:25%;font-family:Helvetica\\">\n   <tr/>\n   \n     
<tr><td>195</td> <td>Give me a new heart O God</td></tr>\n   \n     
<tr><td>220</td> <td>Grant to us O Lord</td></tr>\n   \n     
<tr><td>302</td> <td>Breathe on me breath of God</td></tr>\n   \n   
<tr> <td><a href=\\"..\\">Home</a></td>\n   \n   
</div>\n 
</body>\n</html>'

ब्राउज़र में 'व्यू सोर्स' भी इस ऑर्डर को दिखाता है। लेकिन डेवलपर टूल एलिमेंट्स व्यू, और वास्तविक रेंडर किए गए पेज, दोनों में दोनों हेडिंग हैं, फिर दोनों टेबल: Rendered HTML

0
Cormac 23 नवम्बर 2019, 16:56

1 उत्तर

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

यह एक HTML समस्या है। आप शीर्षक और तालिका को अलग-अलग divs में रखना चाहते हैं और उन्हें 100% चौड़ाई तक फैलाना चाहते हैं। आप एक नया टेबल शुरू करने से पहले अपनी टेबल को भी बंद करना चाहते हैं।

 <div>
     <div style="width:100%">  <h1>{{ title1 }}</h1></div>
       {% if value_list1 %}
      <div style="width:100%">   
<table style="width:25%;font-family:Helvetica">
       <tr/>
       {% for valuePair in value_list1 %}
         <tr><td>{{ valuePair.0 }}</td> <td>{{ valuePair.1 }}</td></tr>
       {% endfor %}
       <tr> <td><a href=\"..\">Home</a></td></tr></table>
       {% else %}
         <p>No values found</p>
    </div>
       {% endif %}
       </div> 

उसकी कोशिश करो।

2
Jay 23 नवम्बर 2019, 17:32