I'm trying to create a simple table. I would like a footer with only one cell but I don't know why it's divided in two. Any idea?
<table class="table-cart-view-producer">
<thead>
<tr>
<th>Produit</th>
<th>Quantité</th>
<th>Prix</th>
</tr>
</thead>
<tfoot>
<tr>
<th> Prix Total du Panier : <strong>{{cart_price}}€</strong></th>
</tr>
</tfoot>
<tbody>
{% for item in cartitems %}
<tr>
<td>{{item.stock_item.product_stockitem.name}}</td>
<td>{{item.quantity}} {{item.stock_item.product_stockitem.unit}}</td>
<td>{{item.get_total_price}}€</td>
</tr>
{% endfor %}
</tbody>
</table>
It renders this way:
Related
<div *ngFor = "let recordData of employees.record">
<div *ngIf = 'recordData.queryName==="style-size-query"'>
<table class ="table">
<thead>
<tr> product </tr>
<tr> size </tr>
<tr> sortOrder </tr>
</thead>
<tbody>
<tr>
<td> {{recordData.data.product}} </td>
<td> {{recordData.data.size}} </td>
<td> {{recordData.data.sortOrder}} </td>
</tr>
</tbody>
</table>
</div>
</div>
// **this is Angular code and this is the output this code is working but table header data is repeating after the each iteration.
I used ngFor for iteration the record array (it is in the first photo) loop. I used the ngIf to select the queryName and there are six record will come (it is in the first photo). I want that six record under a one table
**
Just moved structural directives and used ng-container to use ngIf and ngFor
I don't want to add extra element like div or span to apply ngIf and ngFor condition. that's why I used ng-container.
<div>
<div>
<table class ="table">
<thead>
<tr> product </tr>
<tr> size </tr>
<tr> sortOrder </tr>
</thead>
<tbody>
<ng-container *ngFor = "let recordData of employees.record">
<ng-container *ngIf = 'recordData.queryName==="style-size-query"'>
<tr>
<td> {{recordData.data.product}} </td>
<td> {{recordData.data.size}} </td>
<td> {{recordData.data.sortOrder}} </td>
</tr>
</ng-container>
</ng-container>
</tbody>
</table>
</div>
</div>
Please try like this
<table class ="table">
<thead>
<tr> product </tr>
<tr> size </tr>
<tr> sortOrder </tr>
</thead>
<div *ngIf = 'recordData.queryName==="style-size-query"'>
<tbody>
<tr>
<td> {{recordData.data.product}} </td>
<td> {{recordData.data.size}} </td>
<td> {{recordData.data.sortOrder}} </td>
</tr>
</tbody>
</div>
</table>
i have a html page in my django templates, its a pdf type, the for loop should make a transactions based on the number of which the object model returns, however i want every transaction to be in a full html page, and the other transaction come net page, i have tried to do it but seems a bit hard since im new to django html.
{% extends "base.html" %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
{% block title %} Report {% endblock title %}
<div id="container">
{% block content %}
{% for transaction in transactions %}
{% if transaction.complete %}
<table class="tg">
<thead>
<tr>
<th class="tg-fv77" colspan="12" rowspan="2"><span style="color:#3531FF">Report For Tenant ( {{ transaction.chp_reference }} )</span></th>
</tr>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0pky" colspan="9">CHP Reference</td>
<td class="tg-0pky" colspan="3">{{transaction.chp_reference}}</td>
</tr>
<tr>
<td class="tg-0pky" colspan="9">Rent Effective From (dd/mm/yyyy)</td>
<td class="tg-0pky" colspan="3">{{transaction.rent_effective_date}}</td>
</tr>
<tr>
<td class="tg-0lax" colspan="9">CRA Fortnightly Rates valid for 6 months from</td>
<td class="tg-0lax" colspan="3">{{transaction.cra_rate_from}}</td><hr>
</tr>
<tr>
<td class="tg-0lax" colspan="9">Market Rent of the Property</td>
<td class="tg-0lax" colspan="3">{{transaction.property_market_rent}}</td>
</tr>
<tr>
<td class="tg-0lax" colspan="9">Number of Family Group(s)</td>
<td class="tg-0lax" colspan="3">{{transaction.number_of_family_group}}</td>
</tr>
</tbody>
</table>
{% if transaction.complete %}
<table class="tg" style="undefined;table-layout: fixed; width: 714px">
<colgroup>
<col style="width: 86px">
<col style="width: 201px">
<col style="width: 109px">
<col style="width: 63px">
<col style="width: 121px">
<col style="width: 134px">
</colgroup>
<thead>
<tr>
{% for f in transaction.family_groups.all %}
<th style="text-align:left">Family No</th>
<th style="text-align:left">Income Type</th>
<th style="text-align:left">Name</th>
<th style="text-align:left">Rent %</th>
<th style="text-align:left">Weekly Income</th>
<th style="text-align:left"><span style="background-color:#ffe0c7">Rent Component</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-4erg">{{f.name}}</td>
<td >{% for m in f.family_members.all %}{{ m.num_of_family_members }}<br>{% endfor %}</td>
<td >{% for m in f.family_members.all %} {{m.name}} <br> {% endfor %}</td>
<td class="tg-4erg">{% for m in f.family_members.all %} {{m.effective_rent_percentage}} <br> {% endfor %}
</td>
<td class="tg-4erg">{% for m in f.family_members.all %} {{m.income}} <br> {% endfor %}</td>
<td class="tg-1qbe">{% for m in f.family_members.all %} {{m.income_component|stringformat:".2f"}} <br> {% endfor %}</td>
</tr>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0pky" colspan="9">CHP Reference</td>
<td class="tg-0pky" colspan="3">{{transaction.chp_reference}} Insufficient Info.</td>
<hr>
</tr>
</tbody>
</table>
{% endif %}
</table>
{% endfor %}
{% endblock content %}
</div>
</html>
You can convert a html file to a pdf using xhtml2pdf.There are many other alternatives to it as well.
from django.template.loader import get_template,render_to_string
import xhtml2pdf.pisa as pisa
from io import BytesIO
def render_to_file(path: str, params: dict):
template = get_template(path)
html = template.render(params)
file_name = "report.pdf"
file_path = os.path.join(os.path.abspath(os.path.dirname("__file__")), "charts", file_name)
with open(file_path, 'wb') as pdf:
pisa.pisaDocument(BytesIO(html.encode("UTF-8")), pdf, link_callback=BASE_DIR + '/static/charts/Logo/')
return [file_name, file_path]
where 'path' is the path to your html template and params is the contect dictionary (transaction data in your case).
Do read the documentation of xhtml2pdf as it doesn't support all the css that you would apply to a normal html page.
Hey i am fetching data from excel file but all the data is returning in only one row box this is my html code
{% block body %}
# i am using bootstrap table class
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Pensioner name</th>
<th scope="col">cnic</th>
<th scope="col">mobile</th>
<th scope="col">wallet</th>
</tr>
</thead>
<tr>
{% if 'm1' %}
<td><h6 >{{ m1 }}</h6></td>
{% endif %}
{% if 'm2' %}
<td><h6 >{{ m2 }}</h6></td>
{% endif %}
{% if 'm3' %}
<td><h6 >{{ m3 }}</h6></td>
{% endif %}
{% if 'm4' %}
<td><h6 >{{ m4 }}</h6></td>
{% endif %}
</tr>
</table>
{% endblock %}
this is my outputenter image description here
i want data into separate rows boxes now it looks to messy please help
To create a new row you would need to add a new <tr> element for each row.
Here is a working example
table,
tr,
th,
td {
border: solid 1px;
}
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>James</td>
<td>Matman</td>
<td>Chief Sandwich Eater</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
<td>Crimefighter Sorta</td>
</tr>
</tbody>
</table>
Each <tr> element inside the <tbody> element creates a new row.
I am have my HTML that have a table inside odd two
I want this
but I have this
How can I do the table td with the same ?
This is my code in HTML:
<table>
<thead class='thead-dark'>
<tr>
<th>Semestre</th>
<th>Curso</th>
<th>Seccion</th>
</tr>
</thead>
<tbody>
{% for item in results%}
<tr>
<td>{{item.year}}</td>
<td><table class="table table-striped table-hover">
{% if item.A!= ""%}
<tr><td><p>A.1</p></td></tr>
{%endif%}
{% if item.B != ""%}
<tr><td><p>B.1</p></td></tr>
{%endif%}
</tr></table></td>
<td><table>
{% if item.A != ""%}
<tr><td><p>{{item.A|linebreaks}}</p></td></tr>
{%endif%}
{% if item.B != ""%}
<tr><td><p>{{item.B|linebreaks}}</p></td></tr>
{%endif%}
</tr></table></td>
</tr>
</tbody>
</table>
You don't have to nest a second table in it. Using "rowspan" as #Brian Tomspett suggested will do the trick.
table {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
}
<table>
<tbody>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
</tr>
<tr>
<td rowspan="6">A</td>
<td rowspan="2">A.1</td>
<td>A.1.1</td>
</tr>
<tr>
<td>A.1.2</td>
</tr>
<tr>
<td rowspan="2">A.2</td>
<td>A.2.1</td>
</tr>
<tr>
<td>A.2.2</td>
</tr>
<tr>
<td rowspan="2">A.2</td>
<td>A.3.1</td>
</tr>
<tr>
<td>A.3.2</td>
</tr>
<!--continue the pattern here-->
</tbody>
</table>
i make a table in which rows are dynamically inserted and then i make a div below table when table height increase due to more rows the div does not show ho i set the position of a div when increase table height the div automatically below the table?
here is my code:
<div id="table">
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{% for invoice in invoices %}
<tr>
<td style="color:black;">{{ invoice.description }}</td>
<td style="text-align:right; color:black;">{{ invoice.quantity }}</td>
<td style="text-align:right; color:black;">{{ invoice.unitPrice }}</td>
<td style="text-align:right; color:black;">{{ invoice.linetotal }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div style="width:243px; height:67px; float:right; margin:0px 215px 0; border:1px solid black;">
<h5> Invoice Total(USD) {{invoiceamount}}</h5>
<h5> Paid to date {{paidamount}}</h5>
<div class="horizontalRule2" runat="server"></div>
<h5> Invoice Total(USD) {{balanceamount}}</h5>
</div>
and here is table css:
#table{
float: right;
height: 110px;
margin: 4px 215px 0;
width: 686px;
}
here is screenshot i want div show below the table:
I think in this case I think you should stick with a table for those 2 cells as well, since somehow they are part of the tabulated data.
That means you could you just add them at
<div id="table">
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{% for invoice in invoices %}
<tr>
<td style="color:black;">{{ invoice.description }}</td>
<td style="text-align:right; color:black;">{{ invoice.quantity }}</td>
<td style="text-align:right; color:black;">{{ invoice.unitPrice }}</td>
<td style="text-align:right; color:black;">{{ invoice.linetotal }}</td>
</tr>
{% endfor %}
<td colspan="3" style="text-align:right;"><h5>Invoice Total(USD)</h5></td>
<td style="text-align:right;"><h5>{{invoiceamount}}</h5></td>
<td colspan="3" style="text-align:right;"><h5>Paid to date(USD)</h5></td>
<td style="text-align:right;"><h5>{{balanceamount}}</h5></td>
</tbody>
</table>
</div>
Try clearing the div#table or the totals div that is below:
div#table {
clear:both;
}