Here is the page: http://lim.bz/dlaczegojezus/tabela2.php
All i want is the header stay always on the top when i'm scrolling page down (and also horizonstal).
That's what i'v got now: http://lim.bz/dlaczegojezus/tabela.php but it's not working in IE (v.10) and scrolling is doesnt work.
<table id="tfhover" class="tftable" border="1">
<thead style="width:1923px;">
<tr>
<th colspan="3" width="115px">Data</th>
<th rowspan="2" width="38px">L.p.</th>
<th colspan="3" class="zielony" width="316px">Użytkownik</th>
<th rowspan="2" width="93px">Strona</th>
<th colspan="3" width="247px">Czas</th>
<th colspan="2" width="162px">Położenie</th>
<th colspan="4" class="zielony" width="139px">Wejście</th>
<th rowspan="2" width="71px">System</th>
<th rowspan="2" width="88px">Przeglądarka</th>
<th colspan="5" class="rozowy" width="375px">Dane demograficzne</th>
<th colspan="2" class="zolty" width="245px">Kontakt</th>
</tr>
<tr>
<th width="38px">r.</th>
<th width="22px">m.</th>
<th width="22px">d.</th>
<th class="zielony" width="174px">login</th>
<th class="zielony" width="59px">nieznany</th>
<th class="zielony" width="50px">znany</th>
<th width="64px">wejście</th>
<th width="64px">wyjście</th>
<th width="86px">suma</th>
<th width="70px">długość</th>
<th width="70px">szerokość</th>
<th class="zielony" width="31px">WEB</th>
<th class="zielony" width="17px">FB</th>
<th class="zielony" width="20px">QR</th>
<th class="zielony" width="27px">NFC</th>
<th class="rozowy" width="92px">wyznanie</th>
<th class="rozowy" width="32px">wiek</th>
<th class="rozowy" width="27px">płeć</th>
<th class="rozowy" width="94px">wykształcenie</th>
<th class="rozowy" width="75px">zaludnienie</th>
<th class="zolty" width="39px">typ</th>
<th class="zolty">adres/numer</th>
</tr>
</thead>
<tbody style="width:1923px;">
<tr>
<?php foreach ($sesTab as $k => $ses) {
$time_on_page = ($ses['visit_out'] - $ses['visit_in']) < 0 ? ' - ' : ($ses['visit_out']-$ses['visit_in'] .' sec.' );
echo "
<td width=\"38px\">".date('Y',strtotime($ses['timestamp']))."</td>
<td width=\"22px\">".date('m',strtotime($ses['timestamp']))."</td>
<td width=\"22px\">".date('d',strtotime($ses['timestamp']))."</td>
<td>$k</td>
<td>".$ses['email']."</td>
<td>".$ses['login']."</td>
<td>".$ses['first_name']."</td>
<td>".$ses['filename']."</td>
<td>".date('H:i:s',$ses['visit_in']+3600*7)."</td>
<td>".date('H:i:s',$ses['visit_out']+3600*7)."</td>
<td>".$time_on_page ." </td>
<td>";
if(empty($ses['loc_lng'])) {
echo ' - ';}
else {
$wspol = DECtoDMS($ses['loc_lng']);
echo $wspol['deg']."°".$wspol['min']."'". substr($wspol['sec'],"0","2")."\"";}
echo "</td>
<td>";
if(empty($ses['loc_lat'])){
echo ' - ';}
else{
$wspol = DECtoDMS($ses['loc_lat']);
echo $wspol['deg']."°".$wspol['min']."'". substr($wspol['sec'],"0","2")."\"";}
echo "</td>
<td>x</td>
<td>-</td>
<td>x</td>
<td>-</td>
<td>".$extra_tab[$ses['session_id']]['os']."</td>
<td>".$extra_tab[$ses['session_id']]['browser']."</td>
<td>".$extra_tab[$ses['session_id']]['religion']."</td>
<td>".$extra_tab[$ses['session_id']]['age']."</td>
<td>".$extra_tab[$ses['session_id']]['sex']."</td>
<td>".$extra_tab[$ses['session_id']]['education']."</td>
<td>".$extra_tab[$ses['session_id']]['population']."</td>
<td>email</td>
<td>".$ses['email']."</td>
</tr>";}
?>
</tbody>
</table>
Try using position:fixed; through your CSS on your thead.
you can change
<thead style="width:1923px;">
to
<thead style="width:1923px; position: fixed; top: 0; left: 0;">
also you need to add this css code to the body
<body style="padding-top: 47px;">
where 47px is the height of your fixed row , you can change it .
Hope this will help you
Related
I need for mobile view som manipulation of table. My table for desktop look like:
<table>
<thead>
<tr>
<th scope="row"> </th>
<th scope="col"> </th>
<th scope="col"><strong>Special Header</strong></th>
<th scope="col"> </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><strong>First</strong></th>
<td><strong>Second</strong></td>
<td><strong>Third</strong></td>
<td><strong>fourth</strong></td>
</tr>
<tr>
<th scope="row"><strong>Text</strong></th>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
For mobile devices I need to copy first colum to all other columns. Table should look like:
<table>
<thead>
<tr>
<th scope="row"> </th>
<th scope="col"> </th>
<th scope="row"> </th>
<th scope="col"><strong>Special Header</strong></th>
<th scope="row"> </th>
<th scope="col"> </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><strong>First</strong></th>
<td><strong>Second</strong></td>
<th scope="row"><strong>First</strong></th>
<td><strong>Third</strong></td>
<th scope="row"><strong>First</strong></th>
<td><strong>fourth</strong></td>
</tr>
<tr>
<th scope="row"><strong>Text</strong></th>
<td>Text</td>
<th scope="row"><strong>Text</strong></th>
<td>Text</td>
<th scope="row"><strong>Text</strong></th>
<td>Text</td>
</tr>
</tbody>
</table>
I found some Jquery, but this code only append first column at the end:
$('#addcolumn').click(function() {
$('table tr').each(function() {
$(this).append($(this).find('th:first').clone());
});
});
Can you please help to make Jquery code working for my problem, thank!
Martin
You can use insertAfter this will insert element in the set of matched elements after the target .So, for tbody > td you can loop through tr and get first th cloned it then you can check if td is not last-child of tr if yes just add the cloned element after that td.Now , for thead you can simply use eq(0) to get first th and then use insertAfter to add the cloned after every th where scope="col".
Demo Code :
$('#addcolumn').click(function() {
///loop through tds
$('tbody td').each(function() {
//get th
var clone = $(this).closest("tr").find('th:first').clone()
//if td is not last
if (!$(this).is(':last-child')) {
$(clone).insertAfter(this); //insert the cloned th
}
});
//get the header first th
var headers = $("table").find("thead th:eq(0)").clone();
//insert cloned to th where scope=col and not last child
$(headers).insertAfter("thead th[scope=col]:not(:last-child)");
});
$('#normal').click(function() {
//remove th not first child from thead and tbody
$("thead th[scope=row]:not(:first-child)").remove();
$("tbody th[scope=row]:not(:first-child)").remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th scope="row"> </th>
<th scope="col"> </th>
<th scope="col"><strong>Special Header</strong></th>
<th scope="col"> </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><strong>First</strong></th>
<td><strong>Second</strong></td>
<td><strong>Third</strong></td>
<td><strong>fourth</strong></td>
</tr>
<tr>
<th scope="row"><strong>Text</strong></th>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
<button id="addcolumn">Add</button>
<button id="normal">Reset</button>
I have a homework, I tried to solve it and I'm not successful so I want to ask you for help, who could help me?
<table border="1">
<caption>
Waarnemeningen-
<time id="nu"></time>
<br>
België
</caption>
<thead>
<tr>
<th rowspan="2">Region</th>
<th rowspan="2">Plaats</th>
<th rowspan="2">Temp</th>
<th colspan="2">Wind</th>
</tr>
<tr>
<th>Snelhied</th>
<th>Richting</th>
<th>Druk / trend</th>
</tr>
</thead>
https://imgur.com/a/LVB0ysF
Code: codepen.io/Kxamil/pen/wvvwPEN
this is how it should look like
https://imgur.com/sunyU7h
you need to read more about the rowspan and colspan which you can find here
and here's the code that match the given design
<thead>
<tr>
<th rowspan="2">Region</th>
<th rowspan="2">Plaats</th>
<th rowspan="2" colspan="2">Temp</th>
<th colspan="3">wind</th>
<th colspan="2" rowspan="2">Druk / trend</th>
<th rowspan="2">Druk / trend</th>
</tr>
<tr>
<th>Snelhied</th>
<th colspan="2">Richting</th>
</tr>
</thead>
hope this help
I'm creating my program on w3school which it does not provide any debugging tools at all, I basically finished my project on there but later found out I had 80+ errors that needs fixing which I'm given super generic answers so I can't seem to figure out what exactly the issue is. I'm a super newbie at HTML and unlike java where eclipse at least tells you where exactly the error is at and gives you a little better info I have no idea what the errors mean. I am also using w3school file upload method to debug my program. Also my program is basically just a tv schedule having the days, time, and each shows broken down
I've tried googling some answers but its not really helping
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>Tv Schedule</title>
</head>
<body>
<table>
<table cellpadding="0" cellspacing="0"/>
<thead>
<tr>
<th style="background-color:white">
<th style="background-color:black;color:white">Monday</th>
<th style="background-color:black;color:white">Tuesday</th>
<th style="background-color:black;color:white">Wednesday</th>
<th style="background-color:black;color:white">Thursday</th>
<th style="background-color:black;color:white">Friday</th>
<th style="background-color:black;color:white">Saturday</th>
<th style="background-color:black;color:white">Sunday</th>
</tr>
</thead>
<tbody>
<tr>
<th>12:00pm</th>
<th rowspan="4" style="background-color:purple">Ben & Jerry's show</th>
<th rowspan="2" style="background-color:yellow">The Happy Mile</th>
<th rowspan="3" colspan="3" style="background-color:teal">That Yesterday Show</th>
<th rowspan="4" style="background-color:lime">Let them Running Cat</th>
<th rowspan="4" style="background-color:red">Run Talk</th>
</tr>
<tr>
<th style="background-color:white;color:white">12:30pm</th>
</tr>
<tr>
<th>1:00pm</th>
<th rowspan="2" style="background-color:green">The Laptop Conspiracy</th>
<tr>
<th style="background-color:white;color:white">1:30pm</th>
<th rowspan="3" colspan="2" style="background-color:tan">Cat Street</th>
<th style="background-color:royalblue">Slept News</th>
</tr>
<tr>
<th>2:00pm</th>
<th rowspan="2" colspan="2" style="background-color:Turquoise">Slept</th>
<th rowspan="2" colspan="3" style="background-color:RosyBrown">Adultsnado 4</th>
</tr>
<tr>
<th style="background-color:white;color:white">2:30pm</th>
</tr>
<tr>
<th>3:00pm</th>
<th colspan="5" style="background-color:SandyBrown">Citizen Yang</th>
<th rowspan="3" style="background-color:aqua">Slept</th>
<th rowspan="5" style="background-color:burlywood">Computer Wars</th>
</tr>
<tr>
<th style="background-color:white;color:white">3:30pm</th>
<th rowspan="2" style="background-color:lightsteelblue">Lionnado 4</th>
<th rowspan="3" colspan="2" style="background-color:Olive">Citizen Moong</th>
<th rowspan="2" colspan="2" style="background-color:Moccasin ">Dr. LongestRun</th>
</tr>
<tr>
<th>4:00pm</th>
</tr>
<tr>
<th style="background-color:white;color:white">4:30pm</th>
<th rowspan="2" style="background-color:linen">The N/A part II</th>
<th style="background-color:cornsilk">Back to the Season</th>
<th colspan="2" style="background-color:MediumSpringGreen">Running Year</th>
</tr>
<tr>
<th>5:00pm</th>
<th rowspan="3" style="background-color:MediumOrchid ">WWII Battle Obsession</th>
<th colspan="4" style="background-color:lightyellow">The Fat Running Theory</th>
</tr>
<tr>
<th style="background-color:white;color:white">5:30pm</th>
<th rowspan="2" style="background-color:indianred">Rebel without a computer</th>
<th colspan="2" style="background-color:limegreen">Fighting Tomorrow</th>
<th colspan="3" style="background-color:gold">Episode XVI - The Laptop Run</th>
</tr>
<tr>
<th>6:00pm</th>
<th style="background-color:mistyrose">Spam TV</th>
<th colspan="3" style="background-color:indianred">The Lion</th>
<th style="background-color:mintcream">Running Yer</th>
</tr>
<tr>
<th style="background-color:white;color:white">6:30pm</th>
<th rowspan="3" colspan="5" style="background-color:honeydew">Give God Money</th>
<th rowspan="5" colspan="2" style="background-color:Fuchsia">Skinny Karaoke</th>
</tr>
<tr>
<th>7:00pm</th>
</tr>
<tr>
<th style="background-color:white;color:white">7:30pm</th>
</tr>
<tr>
<th>8:00pm</th>
<th rowspan="4" style="background-color:lavender">Eye of Thailand</th>
<th style="background-color:orange">Slept News</th>
<th style="background-color:orchid">Happy gossip</th>
</tr>
<tr>
<th style="background-color:white;color:white">8:30pm</th>
<th rowspan="3" colspan="2" style="background-color:DarkKhaki">Skinny Today</th>
<th style="background-color:orange">Slept News</th>
<th style="background-color:orchid">Happy gossip</th>
</tr>
<tr>
<th>9:00pm</th>
<th rowspan="2" colspan="3" style="background-color:Aquamarine">Soon Slept</th>
<th rowspan="5" style="background-color:brown">America's Got Laptop</th>
</tr>
<tr>
<th style="background-color:white;color:white">9:30pm</th>
</tr>
<tr>
<th>10:00pm</th>
<th rowspan="3" colspan="5" style="background-color:chocolate">Don't run there</th>
<th rowspan="3" style="background-color:violet">North Fillory Fighting
</tr>
<tr>
<th style="background-color:white;color:white">10:30pm</th>
</tr>
<tr>
<th>11:00pm</th>
</tr>
<th style="background-color:white;color:white">11:30pm</th>
<th colspan="2" style="background-color:crimson">Captain Zeloous and Adult lads</th>
<th style="background-color:yellowgreen">Grand Theft Computer</th>
<th style="background-color:gray">Zealous Rerun</th>
<th colspan="3" style="background-color:dodgerblue">Pay-Per-Download</th>
</tr>
</tbody>
I only get these types of errors,
-document type does not allow element "table" here
-document type does not allow element "th" here
You are missing the head and body tags. You need those for valid html. Your table must be contained in the body tag.
<html>
<head>
</head>
<body>
<table>
<!--All your table stuff-->
</table>
</body>
</html>
Also make sure you have all your closing tags. I noticed some missing </th> tags.
UPDATE: The xmlns attribute is required in XHTML, which you are using. You need to add said attribute to your html tag:
<html xmlns="http://www.w3.org/1999/xhtml">
<!--head,body,etc-->
</html>
This can be found on w3Schools
The source of most of the problems you're facing is missing tags. When writing in any markup or programming language, make sure you have the same number of opening tags/braces/groupings as you do closing groupings at the same time as you go along. This problem can otherwise be harder to spot in code and can have some of the worst results.
Hello i have a table and i want to center a th between two other th.
I want to change the position of th Vieillesse de base to be displayed in the center of Provisionnel and Régularisation.
Here my HTML :
<div class="row mt-1">
<div class="col-12">
<table class="table table-striped table-adjust ">
<thead class="cordonnes-cabinet">
<tr>
<th scope="col">Date</th>
<th scope="col" style="text-align:center" colspan="2">Vieillesse de base</th>
<th scope="col" style="text-align:right">Complémentaire</th>
<th scope="col" style="text-align:right">Total</th>
</tr>
<tr>
<th scope="col">...</th>
<th scope="col" style="text-align:right">Provisionnel</th>
<th scope="col" style="text-align:right">Régularisation</th>
<th scope="col" style="text-align:right">...</th>
<th scope="col" style="text-align:right">...</th>
</tr>
</thead>
<tbody class="cordonnes-cabinet">
#for (int i = 0; i < echeancierGeneriqueAjustee.Count; i++)
{
<tr>
<th style="font-weight:100">#(echeancierGeneriqueAjustee[i]["Date"])</th>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["MontantProv"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["MontantRegul"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["MontantComplement"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["TotalEcheance"])</td>
</tr>
}
<tr>
<th style="font-size:14px">Total</th>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["TotalProv"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["TotalRegul"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["TotalComplement"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["Total"])</td>
</tr>
</tbody>
</table>
</div>
</div>
The key to do this is use html colspan in the th, to simulate equality of width with the second row. Then you only need to use .text-center.
In you particular case, use colspan="2" in the second th
JS FIDDLE DEMO
<table class="table">
<thead class="cordonnes-cabinet">
<tr>
<th>Date</th>
<th colspan="2" class="text-center">Vieillesse de base</th>
<th>Complémentaire</th>
<th>Total</th>
</tr>
<tr>
<th style="width:10%">...</th>
<th class="text-center">Provisionnel</th>
<th class="text-center">Régularisation</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbbody>
<tr>
<th>col1</th>
<td class="text-center">col2</td>
<td class="text-center">col3</td>
<td>col4</td>
<td>col5</td>
</tr>
</tbbody>
</table>
So the issue here is that your text is centered but the Column to the right is X wide and creates a optical illusion that your column is a lot wider.
I would set the column saying "Complémentaire" to text-align: left with class text-left then it will create the illuion you want.
Ive attached a picture where you can see that your code actually centers the text its just an optical illuion
This is how it would look with left aligned in the blue column:
And now its just a question on how to make it pretier with paddings on the td's and th's
Can anyone please suggest the best way to implement sorting in angular 6 using botstrap. This is my table.
I need to sort the table using mrp , ssp ,ymp .
I tried to search for tutorials , but there is angularjs implementation all over the internet .
Can anyone suggest a proper angular 6 implemetation using data table
<table id="myTable" class="table table-striped table-bordered table-dark" #myTable>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Id</th>
<th scope="col">Image</th>
<th scope="col">Name</th>
<th scope="col">Seller</th>
<th scope="col">Category</th>
<th scope="col">Status</th>
<th scope="col" sortable="mrp.value" class="sortable">MRP
</th>
<th scope="col" class="sortable">SSP
</th>
<th scope="col" class="sortable" >YMP
</th>
<th scope="col" class="sortable">Date Added
</th>
</tr>
</thead>
<tbody *ngFor ="let tempProduct of products">
<tr>
<th scope="row"><input type="checkbox" name="cbProducts"
value=`${{tempProduct.id}}`></th>
<td>{{tempProduct.id}}</td>
<td>
<img
src="http://localhost:8080/YourMart-PMP-Admin-
Panel/resources/images/{{tempProduct.primaryImg}}"
height="50" width="50">
</td>
<td>{{tempProduct.name}}</td>
<td>{{tempProduct.seller.name}}</td>
<td>{{tempProduct.category.name}}</td>
<td>{{tempProduct.status}}</td>
<td >{{tempProduct.mrp}}</td>
<td >{{tempProduct.ssp}}</td>
<td >{{tempProduct.ymp}}</td>
<td >{{tempProduct.created}}</td>
</tr>
</tbody>
</table>