I'm creating dynamicly an html table with a php code.
If the data are not updated(by date-time check) i get an .offline td class on the created table.
I want to have only the top 5 results sorted by the highest of the 30 temperatures for example.
I'm using
table.sortable tbody tr:nth-child(n + 6) {
visibility: hidden;
}
To do that.
But if on the top 5 results is something thats 2 hours old data i want to hide it and displat the next one.
I'm trying with:
.offline {
display: none;
}
But it just delete the line and i have for example 4 results
This is the complete table style:
<html>
<head>
<meta charset="UTF-8">
<script src="https://cretaweather.gr/protected/sorttabletemp.js" type="text/javascript"></script>
<link href="../assets/css/templatetable2.css?v=1.1" type="text/css" rel="stylesheet" >
<script>
window.onload = function() {
(document.getElementsByTagName( "th" )[1]).click();
};
</script>
<style>table.sortable tbody tr:nth-child(2n) td {
background: #c2cdd6;
}
table.sortable tbody tr:nth-child(2n+1) td {
background: #ccfffff;
}
table.sortable tbody tr:nth-child(n + 6) {
visibility: hidden;
}
table.sortable tbody td:nth-child(n + 3) {
display: none;
}
.offline {
display: none;
}
</style>
</head>
<body>
<table align="center" id="template" border="1" bordercolordark="#333333" bordercolorlight="#333333" width="300" cellpadding="0" cellspacing="0" style="border-collapse: collapse; text-align:center;" class="sortable">
<thead>
<tr height="31" bgcolor="#c9e5f2">
<th class="sorttable_nosort" width="150" valign="top" align="center">Περιοχή</th>
<th class="sorttable_numeric" valign="top" align="center">Θερμοκρασία</th>
</tr>
</thead>
<tbody>
This is a part of created html:
</tr><tr class="odd-line">
<td class="offline">Μάλια</td>
<td class="offline">22.3°C at 8:57</td>
<td class="offline">29/04/18</td>
<td class="offline">9:01</td>
</tr><tr class="even-line">
<td class="">Μεσοχωριό</td>
<td class="">25.8°C at 14:10</td>
<td class="">25/05/18</td>
<td class="">18:33</td>
</tr><tr class="odd-line">
<td class="offline">Μεταξοχώρι</td>
<td class="offline">32.3°C at 13:43</td>
<td class="offline">23/05/18</td>
<td class="offline">14:00</td>
</tr><tr class="even-line">
<td class="">Μοχός</td>
<td class="">22.2°C at 16:01</td>
<td class="">25/05/18</td>
<td class="">18:34</td>
</tr><tr class="odd-line">
<td class="">Πετροκεφάλι</td>
<td class="">29.4°C at 13:26</td>
<td class="">25/05/18</td>
<td class="">18:30</td>
</tr><tr class="even-line">
<td class="">Πεζά</td>
<td class="">24.1°C at 13:26</td>
<td class="">25/05/18</td>
<td class="">18:30</td>
</tr><tr class="odd-line">
<td class="">Προφήτης Ηλίας</td>
<td class="">25.5°C at 15:16</td>
<td class="">25/05/18</td>
<td class="">18:34</td>
What shall i do to achive that.
visibility: hidden just gives an emty space.
This is how it is displayed now:
i want to hide the red line thats outdated and display the sixth line instead, to have top5 updated data
Related
I am trying to get the section status colors in the webgrid and divide it percentage wise but it is not working for some of the rows
The webgrid cshtml script for section status is written below.
webGrid.Column(header: "Section Status", format: #
<table class="" cellpadding="5" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td id="inProgresswd" width="#item.InProgressPC%" title="#item.InProgressPC%"></td>
<td id="respPendingwd" width="#item.ResponsePendingPC%" title="#item.ResponsePendingPC%"></td>
<td id="revPendingwd" width="#item.ReviewPendingPC%" title="#item.ReviewPendingPC%"></td>
<td id="acceptedwd" width="#item.AcceptedPC%" title="#item.AcceptedPC%"></td>
<td id="rejectedwd" width="#item.RejectedPC%" title="#item.RejectedPC%"></td>
<td id="ftReciverwd" width="#item.FwdToRecieverPC%" title="#item.FwdToRecieverPC%"></td>
</tr>
</tbody>
</table>
, style: "SectionStatus"),
The color should be shown in % wise and for zero % the color should not appear in the grid.As shown the image only 4 status color should appear as 4 have percentage values of 25. But 5 colors are showing up for the highlighted row
table-layout: fixed should fix your problem, however sometimes there still is a 1px wide cell if you use the html width attribute instead of css.
table {
table-layout: fixed;
}
tr > td#inProgresswd {
background: #faa;
}
tr > td#respPendingwd {
background: #afa;
}
tr > td#revPendingwd {
background: #aaf;
}
tr > td#acceptedwd {
background: #ffa;
}
tr > td#rejectedwd {
background: #aff;
}
tr > td#ftReciverwd {
background: #faf;
}
<table cellpadding="5" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td id="inProgresswd" width="25%" title="25%"></td>
<td id="respPendingwd" width="0%" title="0%"></td>
<td id="revPendingwd" width="0%" title="0%"></td>
<td id="acceptedwd" width="25%" title="25%"></td>
<td id="rejectedwd" width="25%" title="25%"></td>
<td id="ftReciverwd" width="25%" title="25%"></td>
</tr>
</tbody>
</table>
<br />
<table cellpadding="5" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td id="inProgresswd" style="width: 25%;" title="25%"></td>
<td id="respPendingwd" style="width: 0%;" title="0%"></td>
<td id="revPendingwd" style="width: 0%;" title="0%"></td>
<td id="acceptedwd" style="width: 25%;" title="25%"></td>
<td id="rejectedwd" style="width: 25%;" title="25%"></td>
<td id="ftReciverwd" style="width: 25%;" title="25%"></td>
</tr>
</tbody>
</table>
So I have the following table that I have created using HTML and CSS: However, I would like the three pieces of information under Harvesting to be split divided evenly so that each cell takes the same amount of space in the Harvesting column. Right now, the table cell with electroflocculation takes up the space of 2 cells because I assigned it to temporarly do so using the rowspan attribute when it should ideally be taking up the space of 4/3 of a cell,
<html>
<head>
<style>
body {
font-family: Arial, Verdana, sans-serif;
font-size: 12 px;
color: #111111;}
th {
letter-spacing: 0.1em;
border-bottom: 2px solid #111111;
border-top: 1px solid #999;
}
.ExtractionConversion {
background-color: #f4cccc;
}
.Cultivation {
background-color: #d9ead3;
}
.Harvesting {
background-color: #fce5cd;
}
.Dewatering {
background-color: #c9daf8;
}
.Extraction {
background-color: #d9d2e9;
}
.Conversion {
background-color: #fff2cc;
}
</style>
</head>
<body>
<table width=800 height=100 style="text-align: center" padding="10">
<thead>
<th>Cultivation</th>
<th>Harvesting</th>
<th>Dewatering</th>
<th>Extraction</th>
<th>Conversion</th>
</thead>
<tbody>
<tr>
<td rowspan="4" class="Cultivation";>Photobioreactor</td>
<td class="Harvesting">Centrifugation</td>
<td rowspan="2" class="Dewatering">Heat Drying</td>
<td rowspan="2" class="Extraction">Wet Solvent Extraction</td>
<td class="Conversion">Decarboxylation<td>
</tr>
<tr>
<td class="Harvesting">Electrocoagulation</td>
<td class="Conversion">Transesterfication</td>
</tr>
<tr>
<td rowspan="2" class="Harvesting">Electroflocculation</td>
<td rowspan="2" class="Dewatering">Speed Drying</td>
<td colspan="2" class="ExtractionConversion">HTL-CHG</td>
</tr>
<tr>
<td colspan="2" class="ExtractionConversion">Pyrolysis</td>
</tr>
</tbody>
</table>
<body>
</html>
You can insert another table in that and style the cells, adding borders to get it done. It's not pretty but it works.
<html>
<head>
<style>
body {
font-family: Arial, Verdana, sans-serif;
font-size: 12 px;
color: #111111;}
th {
letter-spacing: 0.1em;
border-bottom: 2px solid #111111;
border-top: 1px solid #999;
}
.ExtractionConversion {
background-color: #f4cccc;
}
.Cultivation {
background-color: #d9ead3;
}
.Harvesting {
background-color: #fce5cd;
}
.Dewatering {
background-color: #c9daf8;
}
.Extraction {
background-color: #d9d2e9;
}
.Conversion {
background-color: #fff2cc;
}
</style>
</head>
<body>
<table width=800 height=100 style="text-align: center" padding="10">
<thead>
<th>Cultivation</th>
<th>Harvesting</th>
<th>Dewatering</th>
<th>Extraction</th>
<th>Conversion</th>
</thead>
<tbody>
<tr>
<td rowspan="4" class="Cultivation";>Photobioreactor</td>
<td class="Harvesting">Centrifugation</td>
<td rowspan="2" class="Dewatering">Heat Drying</td>
<td rowspan="2" class="Extraction">Wet Solvent Extraction</td>
<td class="Conversion">Decarboxylation<td>
</tr>
<tr>
<td class="Harvesting">Electrocoagulation</td>
<td class="Conversion">Transesterfication</td>
</tr>
<tr>
<td rowspan="2" class="Harvesting">Electroflocculation</td>
<td rowspan="2" class="Dewatering">Speed Drying</td>
<td colspan="2" class="ExtractionConversion">HTL-CHG</td>
</tr>
<tr>
<td colspan="2" class="ExtractionConversion">Pyrolysis</td>
</tr>
</tbody>
</table>
<br>
<table width=800 height=100 style="text-align: center" padding="10">
<thead>
<th>Cultivation</th>
<th>Harvesting</th>
<th>Dewatering</th>
<th>Extraction</th>
<th>Conversion</th>
</thead>
<tbody>
<tr>
<td rowspan="4" class="Cultivation";>Photobioreactor</td>
<td rowspan="4" class="Harvesting" style="padding:0;">
<table cellpadding=0 cellspacing=0 width=100% height=100% style="text-align: center">
<tr>
<td class="Harvesting" style="border-bottom:2px solid white;">Centrifugation</td>
</tr>
<tr>
<td class="Harvesting" style="border-bottom:2px solid white;">Electrocoagulation</td>
</tr>
<tr>
<td class="Harvesting">Electroflocculation</td>
</tr>
</table>
</td>
<td rowspan="2" class="Dewatering">Heat Drying</td>
<td rowspan="2" class="Extraction">Wet Solvent Extraction</td>
<td class="Conversion">Decarboxylation<td>
</tr>
<tr>
<td class="Conversion">Transesterfication</td>
</tr>
<tr>
<td rowspan="2" class="Dewatering">Speed Drying</td>
<td colspan="2" class="ExtractionConversion">HTL-CHG</td>
</tr>
<tr>
<td colspan="2" class="ExtractionConversion">Pyrolysis</td>
</tr>
</tbody>
</table>
<br>
<body>
</html>
My table is similar to the one suggested by Eamon Nerbonne in how do I create an HTML table with fixed/frozen left column and scrollable body?. Its code can be found below.
By default, the table appear as 'scrolled: 0% 0%', i.e. scrolled to the top left (one can see the cell "AAAA" of row 1).
Question: How to make this table 'scrolled: 0% 100%' by default, i.e. that one can see the top right cell when the page is loaded (here cell "ZZZZ" of row 1) as shown in the picture below?
body {
font:16px Calibri;
}
div {
width: 600px;
overflow-x:scroll;
margin-left:5em;
overflow-y:visible;
padding-bottom:1px;
}
table {
border-collapse:separate;
border-top:
3px solid grey;
}
td, th {
margin:0;
border:3px solid grey;
border-top-width:0px;
white-space:nowrap;
}
.headcol {
position:absolute;
width:5em;
left:0;
top:auto;
border-right: 0px none black;
border-top-width:3px; /*only relevant for first row*/
margin-top:-3px; /*compensate for top border*/
}
.headcol:before {content: 'Row ';}
.long { background:yellow; letter-spacing:1em; }
<div>
<table>
<tr>
<th class="headcol">1</th>
<td class="long">AAAAA</td>
<td class="long">BBBBB</td>
<td class="long">CCCCC</td>
<td class="long">DDDDD</td>
<td class="long">EEEEE</td>
<td class="long">FFFFF</td>
<td class="long">GGGGG</td>
<td class="long">HHHHH</td>
<td class="long">.....</td>
<td class="long">XXXXX</td>
<td class="long">YYYYY</td>
<td class="long">ZZZZZ</td>
</tr>
<tr>
<th class="headcol">2</th>
<td class="long">AAAAA</td>
<td class="long">BBBBB</td>
<td class="long">CCCCC</td>
<td class="long">DDDDD</td>
<td class="long">EEEEE</td>
<td class="long">FFFFF</td>
<td class="long">GGGGG</td>
<td class="long">HHHHH</td>
<td class="long">.....</td>
<td class="long">XXXXX</td>
<td class="long">YYYYY</td>
<td class="long">ZZZZZ</td>
</tr>
<tr>
<th class="headcol">3</th>
<td class="long">AAAAA</td>
<td class="long">BBBBB</td>
<td class="long">CCCCC</td>
<td class="long">DDDDD</td>
<td class="long">EEEEE</td>
<td class="long">FFFFF</td>
<td class="long">GGGGG</td>
<td class="long">HHHHH</td>
<td class="long">.....</td>
<td class="long">XXXXX</td>
<td class="long">YYYYY</td>
<td class="long">ZZZZZ</td>
</tr>
<tr>
<th class="headcol">4</th>
<td class="long">AAAAA</td>
<td class="long">BBBBB</td>
<td class="long">CCCCC</td>
<td class="long">DDDDD</td>
<td class="long">EEEEE</td>
<td class="long">FFFFF</td>
<td class="long">GGGGG</td>
<td class="long">HHHHH</td>
<td class="long">.....</td>
<td class="long">XXXXX</td>
<td class="long">YYYYY</td>
<td class="long">ZZZZZ</td>
</tr>
</table>
</div>
Fiddle
You can achieve it like this. direction:rtl and direction:ltr are key here.
JSFiddle - http://jsfiddle.net/wpsnkpLk/ (Thanks to ebo)
div {
width: 320px;
height: 2em;
overflow: scroll;
direction:rtl;
}
table{
direction:ltr;
}
edit: Based on ebo's comments (thanks!), you need to apply the style to the container containing the table (div above) first and then to the table itself for the desired result.
I have a table structured like the one below and it is a on page with a gray background. The problem I am having is removing the cell borders.
<table width="510">
<tbody>
<tr>
<td style="background-color: #fff;" colspan="2" width="510"></td>
</tr>
<tr>
<td style="background-color: #fff;"></td>
<tdstyle="background-color: #fff;"></td>
</tr>
<tr>
<td style="background-color: #fff;"></td>
<td style="background-color: #fff;"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</tbody>
</table>
This is what it looks like no matter what I have tried such as adding a .no-border class border:0; to the <tr> or adding inline css to the <td>. It still comes out like this...
How can I remove the border around all the cells?
You need to remove the cellspacing like this:
table {
border-spacing: 0;
border-collapse: collapse;
}
This is equivalent for the cellspacing="0" HTML attribute. See this example:
body {
background: grey;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
<table width="510">
<tbody>
<tr>
<td style="background-color: #fff;" colspan="2" width="510">t</td>
</tr>
<tr>
<td style="background-color: #fff;">t</td>
<td style="background-color: #fff;">t</td>
</tr>
<tr>
<td style="background-color: #fff;">t</td>
<td style="background-color: #fff;">t</td>
</tr>
<tr>
<td colspan="2">t</td>
</tr>
</tbody>
</table>
I'm trying to select the 5% tr, but my css selector does not seem to work. I also have to write one for the 10% tr, which I expect will be simple after the 5% tr is solved. My selector seems to work down to table, but I cannot get it to select the second tr. What am I doing wrong?
Code:
body > form > div > table > tr:nth-child(2) > td:first-child {
background-color: red
}
<form method="post">
<div>
<table cellpadding="0" align="center" cellspacing="0" border="0">
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td style="width: 5%">
5%
</td>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="height: 100%; border-color: #e0e0e0;">
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td width="10%" valign="top" style="height: 100%;">10%</td>
<td valign="top" width="90%">
My Content
</td>
</tr>
</table>
</tr>
</table>
</div>
</form>
If you do NOT want to change with your HTML markup, meaning adding classes (which would be easier to target the TR and TD) you can use :nth-of-type
Snippet
tr:nth-of-type(2) {
background: red
}
table table tr:nth-of-type(2) td:first-of-type{
background: lightblue
}
<table cellpadding="0" align="center" cellspacing="0" border="0">
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td style="width: 5%">
5%
</td>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="height: 100%; border-color: #e0e0e0;">
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td width="10%" valign="top" style="height: 100%;">10%</td>
<td valign="top" width="90%">
My Content
</td>
</tr>
</table>
</tr>
</table>
Target with following CSS:
tr[width="10%"]{
}
Give it a class so you can select it directly, without having to specify the entire chain:
<tr class="my-tr">
<td style="width: 5%">
....
</tr>
Then you can select it in css:
.my-tr {
background-color:red;
}
Use nth-of-type pseudo selectors. The nested table was tricky, I used td > table to find it. Your 1st target is background: red and 2nd target is outline:2px solid yellow
table {
outline: 3px dashed blue;
table-layout: fixed;
}
table:first-of-type {
background: rgba(0, 0, 0, .3);
}
/* 1st target acquired */
table:first-of-type tr:nth-of-type(2) td:first-of-type {
background: red;
}
form > div {
height: 50vh;
width: 90vw;
outline: 1px solid black;
}
td > table {
outline: 1px solid lime;
}
/* 2nd target acquired */
td > table tr:nth-of-type(2) td:first-of-type {
outline: 2px solid yellow;
}
<html>
<head>
<title>TestPage</title>
<style type="text/css">
/*body > form > div > table:first-of-type > tr:nth-child(2) > td:first-child { background-color:red };*/
</style>
</head>
<body>
<form method="post">
<div>
<table cellpadding="0" align="center" cellspacing="0" border="0">
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td style="width: 5%">
5%
</td>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="height: 100%; border-color: #e0e0e0;">
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td width="10%" valign="top" style="height: 100%;">10%</td>
<td valign="top" width="90%">
My Content
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>