I'm creating a table in html and I want to obtain this result:
I created columns with their headers (S, Incoming, Session..) and rows with values (I retrive data from a Python script), but I can't to divide columns in "queue" and "block".
This is my html for headers: https://jsfiddle.net/Maestro1508/np239Lc0/4/
Full html:
<li><span>Redis Status</span></li>
{% endblock %}
{% block content %}
<div id="main-content" class="col-12">
<h3>Redis Status</h3>
<div class="row">
<div class="col-12 like-a-table border-last-row">
<table class="table">
<thead>
<tr>
<th>Server</th>
<th colspan="2" style="padding-left: .5em;">Incoming</th>
<th colspan="2" style="padding-left: .5em;">Session</th>
<th colspan="2" style="padding-left: .5em;">KPI</th>
<th colspan="2" style="padding-left: .5em;">Export</th>
<th colspan="2" style="padding-left: .5em;">Thresholds</th>
<th colspan="2" style="padding-left: .5em;">AS Profile</th>
<th colspan="2" style="padding-left: .5em;">MP Profile</th>
<th colspan="2" style="padding-left: .5em;">First Beat</th>
</tr>
</thead>
<tbody>
{% for server, keys in redis_info.items %}
<tr id="{{ server }}">
<td> {{ server }} </td>
{% for item in keys %}
<td style="padding-left: .5em;">{{ item.0 }}</td>
<td style="padding-left: .5em;">{{ item.1 }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endblock %}
You could just add an other row in the thead with all of the th you need:
<thead>
<tr>
<th>Server</th>
<th colspan="2" style="padding-left: 0.5em">Incoming</th>
<th colspan="2" style="padding-left: 0.5em">Session</th>
<th colspan="2" style="padding-left: 0.5em">KPI</th>
<th colspan="2" style="padding-left: 0.5em">Export</th>
<th colspan="2" style="padding-left: 0.5em">Thresholds</th>
<th colspan="2" style="padding-left: 0.5em">AS Profile</th>
<th colspan="2" style="padding-left: 0.5em">MP Profile</th>
<th colspan="2" style="padding-left: 0.5em">First Beat</th>
</tr>
<tr>
<th></th>
<th>queue</th>
<th>block</th>
<th>queue</th>
<th>block</th>
<th>queue</th>
<th>block</th>
<th>queue</th>
<th>block</th>
<th>queue</th>
<th>block</th>
<th>queue</th>
<th>block</th>
<th>queue</th>
<th>block</th>
<th>queue</th>
<th>block</th>
</tr>
</thead>
I guess you could make these columns dynamically with the used templating language, if you don't want to hardcode them.
Just add another row below your first header row. Your first row has 17 columns, 1 single + 8 double columns. In your second new rows, just make sure you add 17 single columns (ie without the colspan =2 attribute).
<tr>
<th>1. xxx</th>
...
<th>17. XXX</th>
</th>
Related
I am new to vue and currently working on a project that will load data from database and display it in a table. There are 9 table headers under tag and under the will have the v-for loop that will load the data from database (please refer to the code below). However, the data was successfully loaded but it does not load to the next column that follows the table header (please refer to the image below). Any suggestion on what to do for this? Thank you.
P.S. I have tried to do some research but none provide me the answer that I am looking for as I did 3 layers of nested v-for loop.
This is how the data being loaded, but everything is put under the "agency" column
These are the respective columns that these data should be appended into but it is empty due to the misconfiguration
<thead>
<tr>
<th scope="col">
Agency
</th>
<th>
Ref No
</th>
<th>
Document Type
</th>
<th>
Category
</th>
<th>
Description
</th>
<th>
Submission
</th>
<th>
Starting Date
</th>
<th>
Closing Date
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
<div v-for="values in objects">
<div v-for="value in values">
<tr v-for="item in value">
<td scope="col"> {{ item.agency }} </td>
<td scope="col"> {{ item.reference }} </td>
<td scope="col"> {{ item.type }} </td>
<td scope="col"> {{ item.category }} </td>
<td scope="col"> {{ item.description }} </td>
<td scope="col"> {{ item.submission }} </td>
<td scope="col"> {{ item.starting_date }} </td>
<td scope="col"> {{ item.closing_date }} </td>
<td scope="col">
<a :href="item.link" target="_blank"> View </a>
</td>
</tr>
</div>
</div>
</tbody>
The problem is that you are using divs as the root element of the tbody. As they are rendered in the DOM, it takes out the td's space and the first loop ends up in the first column.
You can solve this by replacing div with template, since it does not render on final DOM output.
Here is a fix:
<tbody>
<template v-for="values in objects">
<template v-for="value in values">
<tr v-for="item in value">
<td scope="col"> {{ item.agency }} </td>
<td scope="col"> {{ item.reference }} </td>
<td scope="col"> {{ item.type }} </td>
<td scope="col"> {{ item.category }} </td>
<td scope="col"> {{ item.description }} </td>
<td scope="col"> {{ item.submission }} </td>
<td scope="col"> {{ item.starting_date }} </td>
<td scope="col"> {{ item.closing_date }} </td>
<td scope="col">
<a :href="item.link" target="_blank"> View </a>
</td>
</tr>
</template>
</template>
</tbody>
To make Vue/eslint stop warning about the missing key directive, you could add the following to the v-fors:
<template v-for="(values, i) in objects">
<template v-for="(value, j) in values">
<tr v-for="(item, k) in value" :key="`${i}.${j}.${k}`">
I have a HTML table with checkboxes. I want to read the first column value based on the row selected using the checkbox. To read the values, a function is called after selecting the checkbox and clicking a button.
Table look this way
<a href="{% url 'app-analyze_retina' %}">
<button onclick="" class="patient-add-btn button1"> Send for Analysis </button>
</a>
{% if btn_clicked %}
<div>
<table class="table" id="patient_list">
<thead class="thead-dark">
<tr>
<th scope="col">Patient ID</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Result/Severity Level</th>
<th scope="col">Tested on</th>
<th scope="col">AI confidence</th>
<th scope="col">Comments</th>
</tr>
</thead>
<tbody>
{% for patient in data %}
<tr>
<td bgcolor="mediumaquagreen">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="checks" id={{patient.0}} value="{{patient.1}}">
<label class="custom-control-label" for={{patient.0}}>{{patient.1}}</label>
</div>
<!-- <td bgcolor="mediumaquagreen" > {{ patient.1 }}</td>-->
<td bgcolor="mediumaquagreen">{{patient.2}}</td>
<td bgcolor="mediumaquagreen" >{{patient.3}}</td>
<td bgcolor="mediumaquagreen">2.846</td>
<td bgcolor="mediumaquagreen">-</td>
<td bgcolor="mediumaquagreen" >Cristina</td>
<td bgcolor="mediumaquagreen" >913</td>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
Function to read the values
def analyze_img(request):
c = request.POST.getlist('checks')
print(c)
return render(request, 'workspace.html')
First I was trying to check whether I am able to read a checkbox but it returns an empty list.
I have a table html with alternate input and checkbox.
My problems is when I want to browse my table with key tab.
When the focus is on checkbox the next tab is not the next cells but the next checkbox.
This is my code:
<form class="tabledit-form">
<table id="table" class=" table-striped">
<thead>
<tr>
<th class="head-num"><div><span>N°</span></div></th>
<th class="head-ba"><div><span>Ba</span></div></th>
<th class="head-num2"><div><span>N2°</span></div></th>
<th class="head-ba2"><div><span>Ba2</span></div></th>
<th class="head-num3"><div><span>N3°</span></div></th>
<th class="head-ba3"><div><span>Ba3</span></div></th>
</tr>
</thead>
<tbody>
{% for i in nb_lines %}
<tr class="line-{{forloop.counter}}">
<td id="lg-{{forloop.counter}}-col-1" tabindex="1"></td>
<td id="lg-{{forloop.counter}}-col-2" tabindex="2"><input type="checkbox" name="ba-1-lg-{{forloop.counter}}" /></td>
<td id="lg-{{forloop.counter}}-col-3" tabindex="3"></td>
<td id="lg-{{forloop.counter}}-col-4" tabindex="4"><input type="checkbox" name="ba-2-lg-{{forloop.counter}}" /></td>
<td id="lg-{{forloop.counter}}-col-5" tabindex="5"></td>
<td id="lg-{{forloop.counter}}-col-6" tabindex="6"><input type="checkbox" name="ba-3-lg-{{forloop.counter}}" /></td>
</tr>
{% endfor %}
</tbody>
</table>
</form>
First of all try not to use tabindex>0 it is not recommended.
Read this for a better understading of tabindex
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
See this example i have made:
<table>
<thead>
<tr>
<th>Cell 1</th>
<th>Cell 2</th>
<th>Cell 3</th>
<th>Cell 4</th>
<th>Cell 5</th>
</tr>
</thead>
<tbody>
<tr>
<td tabindex="0"><input type="checkbox"/></td>
<td tabindex="0">Col</td>
<td tabindex="0"><input type="checkbox"/></td>
<td tabindex="0">Col</td>
<td tabindex="0"><input type="checkbox"/></td>
</tr>
</tbody>
</table>
Please find the attached print format for reference.I am using jinja to create print format.If the content is small,print will have large unwanted space.how can i increase the space of last row in a table dynamially according to page using html and css.
Please find code sample for table without any css.
<table class="table table-condensed table-hover table-bordered" style="font-size:13px;font-family: Arial, Helvetica, sans-serif;">
<tr>
<th>Sl.</th>
<th>Description</th>
<th class="text-right">Qty</th>
<th class="text-right">Unit Price</th>
<th class="text-right">Amount</th>
</tr>
{%- for row in doc.items -%}
<tr>
<td style="width: 2%;">{{ row.idx }}</td>
<td style="width: 73%;">{{ row.description_for_print or '' }}</td>
<td style="width: 2%; text-align: right;">{{ row.qty }}</td>
<td style="width: 13%; text-align: right;">
{{ row.get_formatted("rate", doc) or ''}}
<td style="width: 10%; text-align: right;">{{
row.get_formatted("amount", doc) or ''}}</td>
</tr>
{%- endfor -%}
{%- if doc.discount_amount -%}
<tr>
<td colspan="4">
<div class="row">
<div class="col-xs-12 text-left"><b>Total :</b></div>
</div>
</td>
<td style="width: 8%; text-align: right;"><b>{{ doc.get_formatted("total") or '' }} </b></td>
</tr>
<tr>
<td colspan="4">
<div class="row">
<div class="col-xs-12 text-left"><b>Discount :</b></div>
</div>
</td>
<td style="width: 8%; text-align: right;"><b>{{ doc.get_formatted("discount_amount") or '' }} </b></td>
</tr>
{%- endif -%}
<tr>
<td colspan="4">
<div class="row">
<div class="col-xs-12 text-left"><b>Net Total : {{ doc.base_in_words or '' }}</b></div>
</div>
<td style="width: 8%; text-align: right;"><b>{{ doc.get_formatted("grand_total") or '' }} </b></td>
</tr>
<tr>
<td colspan="4">
<div class="row">
<div class="col-xs-12 text-left"><b>50% Down Payment : {{ frappe.utils.money_in_words(x) or ''}}</b></div>
</div>
</td>
<td style="width: 8%; text-align: right;"><b>{{ "{:,.2f}".format(x) or 0.00 }} </b></td>
</tr>
<tr>
<td colspan="4">
<div class="row">
<div class="col-xs-12 text-left"><b>50% Upon Delivery : {{ frappe.utils.money_in_words(x) or ''}}</b></div>
</div>
</td>
<td style="width: 8%; text-align: right;"><b>{{ "{:,.2f}".format(x) or 0.00 }} </b></td>
</tr>
</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;
}