As the title says, i'm trying to display 2 tables side by side. I tried a couple of methods but no one shows results.
Right now this is the code of the 2 tables:
<div>
<table style="float: left" class="table table-striped table-bordered table-sm">
{% for item in product %}
{% if item.orden_ref_id == orden.id %}
<tr>
<td>
{{ item.articulo }}
</td>
</tr>
{% endif %}
{% endfor %}
</table>
<table style="float: right" class="table table-striped table-bordered table-sm">
{% for item in valor %}
{% if item.refer_id == orden.id %}
{% if item.show_ref == '2' %}
<tr>
<td>
{{ item.costo }}
</td>
</tr>
{% endif %}
{% endif %}
{% endfor %}
</table>
</div>
but it look like this:
Tables look
How can i solve this issue?
You just need to change the div's around the table. If are using bootstrap you make a surrounding row and then make each table a column. If not using bootstrap then see this page for adding the necessary CSS, https://www.w3schools.com/howto/howto_css_two_columns.asp
<div class = "row">
<div class = "col">
<table class="table table-striped table-bordered table-sm">
{% for item in product %}
{% if item.orden_ref_id == orden.id %}
<tr>
<td>
{{ item.articulo }}
</td>
</tr>
{% endif %}
{% endfor %}
</table>
</div>
<div class = "col">
<table class="table table-striped table-bordered table-sm">
{% for item in valor %}
{% if item.refer_id == orden.id %}
{% if item.show_ref == '2' %}
<tr>
<td>
{{ item.costo }}
</td>
</tr>
{% endif %}
{% endif %}
{% endfor %}
</table>
<div class = "col">
</div>
Related
I'm currently trying to display a bunch of Information of a model inside the template.
Therefore I've been creating a table to show all of the information horizontally for every "previous game" in the database:
<table style="height: 100%">
{% for previous_game in previous_games %}
<tr>
<th> {{ previous_game.name }}</th>
</tr>
<tr>
<td> <img id="Videogame_Picture" src="{{ previous_game.image.url }}"> </td>
</tr>
<tr>
<td> {{ previous_game.date }} </td>
</tr>
<tr>
<td> {% load static %} <img id= "Result_Icon" src="{% static previous_game.min_req %} "></td>
</tr>
<tr>
<td> {% load static %} <img id= "Result_Icon" src="{% static previous_game.rec_req %} " ></td>
</tr>
<tr>
<td> PC Rig {{ previous_game.config }}</td>
</tr>
{% endfor %}
</table>
It shall look like this:
But currently all the Table columns are displaying vertically underneath instead of horizontally next to each previous game and I can't figure out why.
Can you help me out here?
Thanks in Advance!
I would have all my headers in the first row and then start looping through my games with a row per game and cells (td) for each game attribute:
<table style="height: 100%">
<tr>
<th> previous game name </th>
<th> image </th>
<th> previous game date </th>
<th> previous game result 1 </th>
<th> previous game result 2 </th>
<th> PC Rig </th>
</tr>
{% for previous_game in previous_games %}
<tr>
<td> {{ previous_game.name }} </td>
<td> <img id="Videogame_Picture" src="{{ previous_game.image.url }}"> </td>
<td> {{ previous_game.date }} </td>
<td> {% load static %} <img id= "Result_Icon" src="{% static previous_game.min_req %} "> </td>
<td> {% load static %} <img id= "Result_Icon" src="{% static previous_game.rec_req %} " ></td>
<td>{{ previous_game.config }}</td>
</tr>
{% endfor %}
</table>
Alright I got a solution:
Since I created a Row for every Information of the "previous game" - Object, in every loop, I needed to put the loop inside the Row, for being able to only create the Row once.
Now it looks like this:
<table style="height: 150px; border: 1px solid black; width: 600px">
<tr>
{% for previous_game in previous_games %}
<th> {{ previous_game.name }}</th>
{% endfor %}
</tr>
<tr>
{% for previous_game in previous_games %}
<td> <img id="Videogame_Picture" src="{{ previous_game.image.url }}"> </td>
{% endfor %}
</tr>
<tr>
{% for previous_game in previous_games %}
<td> {{ previous_game.date }} </td>
{% endfor %}
</tr>
<tr>
{% for previous_game in previous_games %}
<td style="display: inline"> {% load static %} <img id= "Result_Icon" src="{% static previous_game.min_req %} "></td>
<td style="display: inline"> {% load static %} <img id= "Result_Icon" src="{% static previous_game.rec_req %} " ></td>
{% endfor %}
</tr>
<tr>
{% for previous_game in previous_games %}
<td> PC Rig {{ previous_game.config }}</td>
{% endfor %}
</tr>
</table>
It doesn't feel like the cleanest solution tbh, but it worked for me!
I have tried to make a page where one column is fixed and the other one is scrollable. In the template "Os name" and "{{ i.os_name }}", I want to make it fixed. All the other ones should be scrollable.
I have tried some solutions but I'm facing issues. I have pasted the CSS which I have tried. Please tell me where I am going wrong so I can make it correct.
<div>
<table class="table accountTable" id="book-table" cellpadding="0" cellspacing="0" style="width: 91%;">
<thead>
<tr class="accountBorder">
<th class="osfix">Os Name</th>
<th class="">Browser</th>
<th>IP Address</th>
<th>Location</th>
<th>Session Time</th>
<th>Activity</th>
</tr>
</thead>
<tbody>
{% for i in account %}
<tr>
<td><div class="osfixName">{{ i.os_name }}</div></td>
<td>
<div class = "title_elipses accordion">{{ i.browser }}</div>
<div class="panel" style="display: none;"><p>{{i.browser}}</p></div>
</td>
<td>
<div>{{ i.ip_address }}</div>
</td>
<td>
<div>{{ i.city }}, {{ i.country }}</div>
</td>
<td>
{% for key,value in some_date.items %}
{% if i.id == key %}
<!-- here we are displaying the age of the ad -->
<span class="dealpagetext">{{ value }}</span><br>
{% endif %}
{% endfor %}
<!-- <div>{{ i.last_loggedin }}</div>-->
</td>
<td>
{% if i.activity == 1 %}
<div>Signout</div>
{% else %}
<div></div>
{% endif %}
</td>
</tr>
{% empty %}
<tr>
<td colspan="7" class="text-center">No History</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
css
#book-table {
width: 131% !important;
margin-left: 111px;
}
.osfix {
position: fixed;
left: 0;
background-color: #ddd;
padding-left: 4px;
}
.osfixName {
position: fixed;
left: 0;
padding-left: 4px;
z-index: 88;
background-color: #fff;
}
I'm having an issue with the template view below. I've added a scrollbar to the "Used in" table at the bottom, however I am getting a lot of whitespace underneath it. When I try removing each div/element one by one the issue seems to come from that table alone.
view.html
{% extends "includes/base.html" %}
{% load crispy_forms_tags %}
{% block body %}
<div class="container-fluid">
<div class="row">
<div class="col">
<form method="POST">
<br>
{% csrf_token %}
{% crispy partform %}
</form>
<br>
<table class="table table-hover">
<tbody>
{% for comment in partcomments %}
<tr>
<td>{{ comment }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<form method="POST">
<br>
{% csrf_token %}
{% crispy commentForm %}
</form>
<div>
{% for image in images %}
<img class="center img-responsive" src="{{ image.image.url }}"
style="height: 25%"/>
{% endfor %}
<br>
<form enctype="multipart/form-data" method="post">
{% csrf_token %}
{{ imageform.as_p }}
<button type="submit">Upload</button>
</form>
</div>
</div>
<div class="col">
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table class="table table-hover mb-0">
<thead>
<tr>
<th>Supplier</th>
</tr>
</thead>
<tbody>
{% for supplier in partsuppliers %}
<tr data-href="{% url 'info_supplier' supplier.supplier.id %}">
<td>{{ supplier }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<a class="btn btn-secondary btn-sm btn-pad" href="{% url 'addpartsupplier' part_id=part_id %}"
role="button">Add
Supplier</a>
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table class="table table-hover mb-0">
<thead>
<tr>
<th>Movements</th>
</tr>
</thead>
<tbody>
{% for movement in movements %}
<tr>
<td>{{ movement.history_date }}</td>
<td>{{ movement.history_user }}</td>
<td>{{ movement.change }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table class="table table-hover mb-0">
<thead>
<tr>
<th>Used in</th>
</tr>
</thead>
<tbody>
{% for activity in activities %}
<tr>
<td>{{ activity.group.groupName }}</td>
<td>{{ activity.activity.activityName }}</td>
<td>{{ activity.qty.quantity__sum }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
{% endblock %}
I have a custom.css file served in the static folder that is loaded in the base.html as per below. The issue arises only in this view as I've tried removing the base.html and haven't found any overflow issues in my other template views
custom.css
.my-custom-scrollbar
{
position: relative;
max-height: 25%;
overflow: auto;
}
.table-wrapper-scroll-y {
display: block;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
I think I'm not including something in the CSS. any help would be appreciated.
Edit: Picture added below for clarification. Lots of whitespace that extends to where the table ends without the y scroll.
Bootstrap applies a margin-bottom of 20px to the ".table" class. If you inspect the table in the console - you will be able to see that styling.
In order to remove this- you will need to over-ride the style rule in your own styling (note that this MUST be after the Bootsrtrap styles are imported).
.table {
margin-bottom: 0;
}
I have a very weird bahaviour with the library DataTable.
I have a classical table build with a loop of 14 elements. When displayed normaly, everything appears, when I make it a DataTable, the last 4 columns disappear.
My code where horizon has the value 14 (tested) and which only shows 10 columns of the loop (displays everything if I remove the DataTable class) :
<table id="ingredients_table" class="table DataTable">
<thead>
<tr>
<th>Produit</th>
<th>Marque</th>
<th title="Quantité disponible dans un produit" data-toggle="tooltip" data-placement="top">Packaging</th>
<th title="Unité de gestion des stocks" data-toggle="tooltip" data-placement="top">UGS</th>
<th>Stock min</th>
<th>Stock actuel</th>
<th class="text-right">J+</th>
{% for i in 1..horizon %}
<th>{{ i }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% spaceless %}
{% for ingredient in ingredients -%}
<tr data-table_form_id="{{ ingredient.id }}" data-id="{{ ingredient.id }}" data-repo="AppBundle:FoodAnalytics\UserIngredient">
<td>{{ ingredient.getInferredName }}</td>
<td>{{ ingredient.getProductBrand }}</td>
<td>{{ ingredient.getProductPackaging }}</td>
<td style="min-width: 100px !important;" data-table_form_value="{{ ingredient.unit.id }}">
{{ ingredient.unit }}
</td>
<td style="min-width: 70px !important;">
{{ ingredient.stockMini | round_quantity }}
</td>
<td style="min-width: 70px !important;">
{{ ingredient.getLastNumberObjectValue() }}
</td>
<td><span class="sparkline" data-id="{{ ingredient.id }}"></span></td>
{% for i in 1..horizon %}
{% if stocks[ingredient.id][i] < 0 %}
{% set class = 'text-danger' %}
{% elseif stocks[ingredient.id][i] < ingredient.stockMini %}
{% set class = 'text-warning' %}
{% endif %}
<td{% if class is defined %} class="{{ class }}"{% endif %}>
{{ stocks[ingredient.id][i]|round_quantity }}
</td>
{% endfor %}
</tr>
{% endfor %}
{% endspaceless %}
</tbody>
<tfoot>
<tr>
<th>Produit</th>
<th>Marque</th>
<th title="Quantité disponible dans un produit" data-toggle="tooltip" data-placement="top">Packaging</th>
<th title="Unité de gestion des stocks" data-toggle="tooltip" data-placement="top">UGS</th>
<th>Stock min</th>
<th>Stock actuel</th>
<th class="text-right">J+</th>
{% for i in 1..horizon %}
<th>{{ i }}</th>
{% endfor %}
</tr>
</tfoot>
</table>
$('.DataTable').DataTable({iDisplayLength: 50, responsive: true});
Does someone has an idea of what's wrong ?
try this:
$(document).ready(function(){
$('.DataTable').DataTable({iDisplayLength: 50, responsive: true});
});
I have a page that calls a custom tag that, in turn, calls html that forms a table:
<table>
<tbody>
<tr>
{% for x in variable %}
<td>
<table class="[class]">
<tbody>
{% for y in another variable %}
<tr>
<td>
<form>
[a form]
{% csrf_token %}
</form>
</td>
<td>
<form>
[another form]
{% csrf_token %}
</form>
</td>
{% endfor %}
</tbody>
</table>
</td>
{% endfor %}
</tr>
</tbody>
</table>
Is there an easy way to get this to auto-wrap when it reaches the end of a specified width or the edge of a screen?
(Note that this HTML is being generated from Django, but this isn't Django-specific).