Here is a part of my HTML code.
<link rel="stylesheet" href="{% static "css/mystyle.css" %}"/>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Here are your patient records:</h1>
<h2>Go to /formpage to fill the form</h2>
{% if patients %}
<table>
<thead>
<th>Patient Name</th>
<th>Identity Document Number</th>
<th>Date of Birth</th>
<th>Date Case Confirmed</th>
<th>Case Number</th>
</thead>
{% for pat in patients %}
<tr>
<td>{{ pat.name }}</td>
<td>{{ pat.idn }}</td>
<td>{{ pat.date_of_birth }}</td>
<td>{{ pat.confirm_day }}</td>
<td>{{ pat.case_no }}</td>
</tr>
{% endfor %}
</table>
I want to edit the table according to my CSS rules.
h1{
color: red;
}
table, td, th{
border: 1px solid black;
}
table {
border-collapse: collapse;
}
However, the table does not respect the changes from CSS. Funny thing is, h1 header is actually following the CSS rule and is red.
What am I missing?
Try to inspect element the table and check if your border: 1px solid black; applies to the element (on inspect element window, on css box, make sure the text isn't in strikethrough), if the text is in strikethrough, try adding !important keyword next to black and before ;.
Your CSS gets applied to the table elements, you can check it with the developer tools in your browser.
Also a running example of your table:
h1 {
color: red;
}
table,
td,
th {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
<h1>Here are your patient records:</h1>
<h2>Go to /formpage to fill the form</h2>
<table>
<thead>
<th>Patient Name</th>
<th>Identity Document Number</th>
<th>Date of Birth</th>
<th>Date Case Confirmed</th>
<th>Case Number</th>
</thead>
<tbody>
<tr>
<td>name</td>
<td>idn</td>
<td>date_of_birth</td>
<td>confirm_day</td>
<td>case_no</td>
</tr>
<tr>
<td>name</td>
<td>idn</td>
<td>date_of_birth</td>
<td>confirm_day</td>
<td>case_no</td>
</tr>
<tr>
<td>name</td>
<td>idn</td>
<td>date_of_birth</td>
<td>confirm_day</td>
<td>case_no</td>
</tr>
</tbody>
</table>
Related
What I am doing is to render table in HTML from Flask server. Bootstrap code I have referred to is from this link:
Bootstrap multi-filter
my HTML code:
<table id="example" class="table table-striped">
<thead>
<tr>
<th scope="col">Index</th>
<th scope="col">Col2</th>
<th scope="col">Col3</th>
<th scope="col">Col4</th>
</tr>
</thead>
<tbody>
{% for item in rows %}
<tr>
<td><form action="/get1" method="POST"><button formtarget="_blank"
name="input" type="submit"
formaction="/get1"
value={{item[0]}}>{{item[0]}}</button>
</form>
</td>
<td>{{ item[1] }}</td>
<td>{{ item[2] }}</td>
<td>{{ item[3] }}</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
<th>Index</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
</tr>
</tfoot>
</table>
I have exactly the same JS files as shown in the Bootstrap website.
My objective is to get the search label and input box to the left, and 'show entries per page' label and dropdown to the right. For this I tried using following additional CSS, but it did not work as intended.
<style>
.dataTables_wrapper .col-md-6:nth-of-type(1){
order: 2;
}
div.dataTables_wrapper div.dataTables_filter label {
text-align: left;
}
div.dataTables_wrapper div.dataTables_filter input {
width: 100%;
margin: 5px;
}
div.dataTables_wrapper.dataTables_length select input{
width: 100%;
}
</style>
When I open page it shows like this:
enter image description here
Where as my objective is to show the search box and #entries box as follows:
enter image description here
I need some help to correct my CSS to achieve placing search on left and entries on right.
I have a table to list the vehicles, i need to show one message over the last three table headings only always above the three headings without exceeding the table heading width (total width of three headings).
I have implemented tried:
<div class="col-md-12">
<h2>Vehicle List</h2><br>
<h2>To be Sold</h2>
<div class="table-responsive">
<div class=" col-md-6 alert-warning" id="vechicle_msg_div">Documents pending for these
vehicles</div>
<table class="table table-bg m-t-sm">
<thead>
<tr>
<th width="30">No</th>
<th>Owner Name</th>
<th>Place</th>
<th>Name</th>
<th>Brand</th>
<th>color</th>
</tr>
</thead>
<tbody *ngIf="vehicleList != null">
<td>{{ vehicleList.length +i }}</td>
<td>{{ list.ownername }}</td>
<td>{{ list.place }}</td>
<td>{{ list.name }}</td>
<td>{{ list.brand }}</td>
<td>{{ list.color }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
#vechicle_msg_div {
position: relative;
top: 1px;
padding: 10px;
width:auto;
float: right;
text-align: center;
border: 1px dashed;
}
Now what happens is the width of the text in vechicle_msg_div is not properly aligned and also the width of the text div changes based on the content of any of the td width varies.
I want to display the vechicle_msg_div in same width of last three <th></th> what ever the content's width is..
You can create another table header row and use the the colspan attribute to let its table data cells span multiple columns like this:
<table>
<thead>
<tr>
<td colspan="3"></td>
<td colspan="3">Documents pending for these vehicles</td>
</tr>
<tr>
<th width="30">No</th>
<th>Owner Name</th>
<th>Place</th>
<th>Name</th>
<th>Brand</th>
<th>color</th>
</tr>
</thead>
</table>
Check out the mdn pages around https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td#attr-colspan for more details.
I am trying to reproduce the hovering effect that this W3Schools example show here. This example links its CSS to this url instead of embedding it in the code.
I extract the HTML code and all CSS codes for the elements in the page as below. But the same effect does not render on my page. Is there something else in that stylesheet link that controls the rendering? I am a noob in CSS.
HTML
.w3-table,.w3-table-all {
border-collapse:collapse;
border-spacing:0;
width:100%;
display:table
}
.w3-table-all {
border:1px solid #ccc
}
.w3-bordered tr,.w3-table-all tr {
border-bottom:1px solid #ddd
}
.w3-table-all tr:nth-child(odd) {
background-color:#fff
}
.w3-table-all tr:nth-child(even) {
background-color:#f1f1f1
}
.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th {
padding:8px 8px;
display:table-cell;
text-align:left;
vertical-align:top
}
.w3-table-all th:first-child,
.w3-table-all td:first-child{
padding-left:16px
}
.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover {
background-color:#ccc
}
<div class="w3-container">
<h2>Hoverable Table</h2>
<table class="w3-table-all w3-hoverable">
<thead>
<tr class="w3-light-grey">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
</table>
</div>
Update: the HTML code above is coded in a Django template as below and the CSS code is embedded in the table.css file. All directory paths have been verified as working. Is there something in the template that prevents the hovering render?
{% extends "base.html" %}
{% load static %}
{% block title %}Table Detail{% endblock %}
{% block content %}
<link href="{% static 'css/table.css' %}" rel="stylesheet"/>
{% block sidebar %}
{% include 'sidebar_view.html' %}
{% endblock %}
{% block page_header_content %}
<div class="page_header">
<h1>Order for Table {{table_pk}}</h1>
</div>
{% endblock %}
<div class="menu_row">
<div class="column left_column" >
<!-- some stuff here-->
</div>
<div class="column right_column">
<h2>Summary</h2>
<br>
<div class="w3-container">
<h2>Hoverable Table</h2>
<table class="w3-table-all w3-hoverable">
<thead>
<tr class="w3-light-grey">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
</table>
</div>
</div>
<div id="bottom-nav" class="bottom-nav">
<!-- some stuff here-->
</div>
{% endblock %}
Update: I tried placing the above code into the base.html, which is the base template and it works nicely. What is the difference between the base template and a child template that causes this to not render?
One possible issue is that your table is missing the tbody tag, which is used in the selector for the hover style: .w3-hoverable tbody tr:hover. Browsers seem to add this in for you if missing, but it's good practice to include it anyway and is a possible source of the error.
Just update your HTML (Django template) to include a tbody tag after the thead and around all the tr elements, like this:
<table class="w3-table-all w3-hoverable">
<thead>
<tr class="w3-light-grey">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
<tbody> <!-- here -->
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
</tbody> <!-- and here -->
</table>
In JavaScript, one style width value is set for all columns, and I can't resize them one by one. I need to resize columns one by one, not all at once:
<table class="table table-striped table-bordered dataTable" id="detailed">
<thead>
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>C4</th>
<th>C5</th>
<th>C6</th>
</tr>
</thead>
<tfoot>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tfoot>
<tbody>
{% for col in cols %}
<tr>
<td>{{ col.name1 }}</td>
<td>{{ col.name2 }}</td>
<td>{{ col.name3 }}</td>
<td>{{ col.name4 }}</td>
<td>{{ col.name5 }}</td>
<td>{{ col.name6 }}</td>
</tr>
{% endfor %}
</tbody>
</table>
Use nth-child to change individual column's width. JSFiddle
tr>td:nth-child(1){
width:100px;
}
tr>td:nth-child(4){
width:450px;
}
You will have to assign an id (or class if you want to change some cells but not all.) to the tags. Then of course use normal CSS to change width, height or padding, etc.
PS. On my phone right now, hard to provide any sample code. Feel free to suggest edit.
Add to table
width: 100%
Next you can add something like this to each TH :
<th style="width: 10%; padding: 5px;">C1</th>
Or (best option i think) add to th class and set there a css
<th class="nameClass">C2</th>
Style CSS:
.nameClass {
width: 10%; // could be other value in px, inc etc.
padding: 5px;
}
Better options to make this is from user below :P
I have a table:
HTML:
<table style="width:100%">
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
#foreach($draftOrderProducts as $draftOrderProduct)
<tr>
<td>{{ $draftOrderProduct['products_name'] }}</td>
<td>{{ $draftOrderProduct['products_name'] }}</td>
<td>{{ $draftOrderProduct['products_quantity'] }}</td>
<td>${{ $draftOrderProduct['products_price'] }}</td>
<td>${{ $draftOrderProduct['final_price'] }}</td>
</tr>
#endforeach
</tbody>
<tr>
<td></td> // empty bordered table data which I want to get rid of
<td></td> // empty bordered table data which I want to get rid of
<td></td> // empty bordered table data which I want to get rid of
<td></td> // empty bordered table data which I want to get rid of
<td><b>Grand Total<b></td>
</tr>
<tr>
<td></td> // empty bordered table data which I want to get rid of
<td></td> // empty bordered table data which I want to get rid of
<td></td> // empty bordered table data which I want to get rid of
<td></td> // empty bordered table data which I want to get rid of
<td>${{ $grandTotal }}}</td>
</tr>
</table>
CSS:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
ul {
list-style-type: none;
}
As you can see, I am using empty td's to "almost" achieve my goal. My goal is to have 2 last rows, with 2 td's aligned to the right for the grand total. I would prefer not having empty bordered td's on their left however (but need to keep the right alignement of the "grand total" td's.
You can't get rid of all empty td's you need to use atleast one. Just use colspan . try this which is the closest match for what you're looking to achieve:
<td colspan="4"></td>
<td>${{ $grandTotal }}}</td>
If you still want to remove the border around the border around the extra td, unfortunately there isn't a clean way. But you can achieve it by a CSS trick. try this:
<table>
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
#foreach($draftOrderProducts as $draftOrderProduct)
<tr>
<td>{{ $draftOrderProduct['products_name'] }}</td>
<td>{{ $draftOrderProduct['products_name'] }}</td>
<td>{{ $draftOrderProduct['products_quantity'] }}</td>
<td>${{ $draftOrderProduct['products_price'] }}</td>
<td>${{ $draftOrderProduct['final_price'] }}</td>
</tr>
#endforeach
</tbody>
<tfoot>
<tr>
<td class="final" colspan="4"></td>
<td><b>Grand Total</b></td>
</tr>
<tr>
<td class="final" colspan="4"></td>
<td>${{ $grandTotal }}}</td>
</tr>
</tfoot>
</table>
And use the CSS:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
.final{
border: 1px solid transparent;
border-right: 1px solid black;
}
ul {
list-style-type: none;
}
Demo
Tables are a bit painful. colspan is probably your best bet here.
<tr>
<td colspan="4"></td>
<td><b>Grand Total<b></td>
</tr>
<tr>
<td colspan="4"></td>
<td>${{ $grandTotal }}}</td>
</tr>
EDIT: As far as styling tables goes they're pretty damn stubborn and you will need some css magic to get the desired outcome here in regards to borders.
This should acheive what you're after:
<style>
table {
width: 100%;
}
td {
border: 3px solid #000;
}
tfoot td:first-child {
border: none !important;
}
</style>
<table>
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
#foreach($draftOrderProducts as $draftOrderProduct)
<tr>
<td>foo</td>
<td>bar</td>
<td>car</td>
<td>sa</td>
<td>bla</td>
</tr>
#endforeach
</tbody>
<tfoot>
<tr>
<td colspan="4"></td>
<td><b>Grand Total</b></td>
</tr>
<tr>
<td colspan="4"></td>
<td>${{ $grandTotal }}}</td>
</tr>
</tfoot>
</table>
Set the colspan attribute for the td element. In this case <td colspan='5'>sample text</td>. Then you can align or float right.
Replace:
<td><b>Grand Total<b></td>
With:
<td colspan='5'><b>Grand Total<b></td>