Develop Reference

Adjust the layout of table when in mobile view

For my site I have a table which I've done here: https://jsfiddle.net/stw4jyq8/
table {
width: 600px;
}
th,
td {
padding: 7px 10px 10px 10px;
}
th {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 90%;
bottom-border: 2px solid #111111;
border-top: 1px solid #999;
text-align: left;
}
tr.even {
background-color: #efefef;
}
tr:hover {
background-color: #c3e6e5;
}
<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th></th>
<th>Per 4 Pack(200G)</th>
<th>Per 100g</th>
<th>Per Buttery(50G)</th>
</tr>
<tr>
<th>Calories</th>
<td>724</td>
<td>362</td>
<td>181</td>
</tr>
<tr class="even">
<th>Fat</th>
<td>43.1g</td>
<td>21.6g</td>
<td>10.8g</td>
</tr>
<tr>
<th>Saturated</th>
<td>15.7g</td>
<td>7.9g</td>
<td>3.9g</td>
</tr>
<tr class="even">
<th>Sodium</th>
<td>1,941.9mg</td>
<td>971mg</td>
<td>485.5mg</td>
</tr>
<tr>
<th>Carbohydrates</th>
<td>78.6g</td>
<td>39.3g</td>
<td>19.7g</td>
</tr>
<tr class="even">
<th>Fiber</th>
<td>0g</td>
<td>0g</td>
<td>0g</td>
</tr>
<tr>
<th>Sugar</th>
<td>10.9g</td>
<td>5.5g</td>
<td>2.7g</td>
</tr>
<tr class="even">
<th>Protein</th>
<td>10.5g</td>
<td>5.3g</td>
<td>2.6g</td>
</tr>
</table>
It looks fine when being viewed on a laptop but it doesn't look great when in mobile view. What I'm looking to do is that when I'm in mobile view it will change to something like:
and then underneath it will be a separate table for per 100g and then a 3rd for per buttery if that makes sense?
For this I am not sure how I could go about that though, would someone be able to point me in the right direction?
I'm thinking this is the best direction to go with? Unless someone has a better idea? Thanks again.

As a first lead, and despite agreeing with the suggestions for a select box, here's how you would have to do it with 3 tables for mobile:
Show your table as you did, but set a class to the columns to ease hiding them and styling them in general
Repeat your table 2 more times with only one data column each time (per 100g, per buttery)
Hide those 2 additional tables on large screens (by default) using CSS
Use a media query to trigger the changes:
Hide 3rd and 4th columns in your large table
Show both mobile tables
Adjust widths for better display
You can see the change in display in the below snippet by adjusting your window size
table.main {
width: 600px;
}
table.mobile {
display: none;
}
table.composition {
border: none;
border-spacing: 0;
border-collapse: collapse;
}
th,
td {
padding: 7px 10px 10px 10px;
}
th {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 90%;
bottom-border: 2px solid #111111;
border-top: 1px solid #999;
text-align: left;
}
tr:nth-child(2n) {
background-color: #efefef;
}
tr:hover {
background-color: #c3e6e5;
}
#media screen and (max-width: 600px) {
table.main .per-50g {
display: none;
}
table.main .per-100g {
display: none;
}
table.mobile {
display: table;
}
table.composition {
width: 100%;
}
table.composition td {
width: 50%;
}
}
<table class="main composition">
<tr>
<th></th>
<th>Per 4 Pack(200G)</th>
<th class="per-100g">Per 100g</th>
<th class="per-50g">Per Buttery(50G)</th>
</tr>
<tr>
<th>Calories</th>
<td>724</td>
<td class="per-100g">362</td>
<td class="per-50g">181</td>
</tr>
<tr>
<th>Fat</th>
<td>43.1g</td>
<td class="per-100g">21.6g</td>
<td class="per-50g">10.8g</td>
</tr>
<tr>
<th>Saturated</th>
<td>15.7g</td>
<td class="per-100g">7.9g</td>
<td class="per-50g">3.9g</td>
</tr>
<tr>
<th>Sodium</th>
<td>1,941.9mg</td>
<td class="per-100g">971mg</td>
<td class="per-50g">485.5mg</td>
</tr>
<tr>
<th>Carbohydrates</th>
<td>78.6g</td>
<td class="per-100g">39.3g</td>
<td class="per-50g">19.7g</td>
</tr>
<tr>
<th>Fiber</th>
<td>0g</td>
<td class="per-100g">0g</td>
<td class="per-50g">0g</td>
</tr>
<tr>
<th>Sugar</th>
<td>10.9g</td>
<td class="per-100g">5.5g</td>
<td class="per-50g">2.7g</td>
</tr>
<tr>
<th>Protein</th>
<td>10.5g</td>
<td class="per-100g">5.3g</td>
<td class="per-50g">2.6g</td>
</tr>
</table>
<table class="mobile per-100g composition">
<tr>
<th></th>
<th class="per-100g">Per 100g</th>
</tr>
<tr>
<th>Calories</th>
<td class="per-100g">362</td>
</tr>
<tr>
<th>Fat</th>
<td class="per-100g">21.6g</td>
</tr>
<tr>
<th>Saturated</th>
<td class="per-100g">7.9g</td>
</tr>
<tr>
<th>Sodium</th>
<td class="per-100g">971mg</td>
</tr>
<tr>
<th>Carbohydrates</th>
<td class="per-100g">39.3g</td>
</tr>
<tr>
<th>Fiber</th>
<td class="per-100g">0g</td>
</tr>
<tr>
<th>Sugar</th>
<td class="per-100g">5.5g</td>
</tr>
<tr>
<th>Protein</th>
<td class="per-100g">5.3g</td>
</tr>
</table>
<table class="mobile per-50g composition">
<tr>
<th></th>
<th class="per-50g">Per Buttery(50G)</th>
</tr>
<tr>
<th>Calories</th>
<td class="per-50g">181</td>
</tr>
<tr>
<th>Fat</th>
<td class="per-50g">10.8g</td>
</tr>
<tr>
<th>Saturated</th>
<td class="per-50g">3.9g</td>
</tr>
<tr>
<th>Sodium</th>
<td class="per-50g">485.5mg</td>
</tr>
<tr>
<th>Carbohydrates</th>
<td class="per-50g">19.7g</td>
</tr>
<tr>
<th>Fiber</th>
<td class="per-50g">0g</td>
</tr>
<tr>
<th>Sugar</th>
<td class="per-50g">2.7g</td>
</tr>
<tr>
<th>Protein</th>
<td class="per-50g">2.6g</td>
</tr>
</table>
You could use some javascript to duplicate the table, if that suits your use case.

Is there a way of comparing the row of two selected tables in HTML?

I have multiple tables and i want to select any two tables and then perform some task on each row on click of a button(Calculate) . How can I access data of selected table so that i can compare their data for the task? Currently I am using checkbox to select the tables but stuck how to access the content of the tables for the comparison?
var selectedRows = document.getElementsByClassName('selected');
function inputChanged(event) {
console.log(table)
alert(selectedRows)
console.log(selectedRows)
event.target.parentElement.parentElement.className =
event.target.checked ? 'selected' : '';
}
.table_container{
float:left;
width:25%;
}
.container::after{
content: "";
clear: both;
display: table;
}
table{
margin: 0 auto;
border-radius: 10px;
}
tr{
padding: 15px;
text-align: center;
}
td{
color: black;
text-align: center;
vertical-align: middle;
border: 1px double white;
height: 50px;
background-color: #e1edf9;
width:272px;
}
.sub_text{
font-size: 12px;
font-style: italic;
color: #0071ce;
font-weight: 100;
}
th{
background-color: #0071ce;
text-align: center;
padding: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: white;
font-weight: bold;
}
.header{
color: #0071ce;
font-weight: bold;
padding: 10px;
}
<div class="container">
</div>
<div class="table_container">
<table id="plans">
<tr><th>Plan A
<input id="mycheck" type="checkbox" onchange="inputChanged(event)" />
</th></tr>
<tr>
<td>$33.90</td>
</tr>
<tr>
<td>$161.30</td>
</tr>
<tr>
<td>$53.30</td>
</tr>
<tr>
<td>$186.20</td>
</tr>
<tr>
<td>HSA match:up to $350</td>
</tr>
<tr>
<td>HSA match:up to $700</td>
</tr>
<tr>
<td>$3000</td>
</tr>
</table>
</div>
<div class="table_container">
<table id="plans" >
<tr><th>Plan B
<input id="mycheck" type="checkbox" onchange="inputChanged(event)" />
</th></tr>
<tr>
<td>$1386.20</td>
</tr>
<tr>
<td>HSA match:up to $1350</td>
</tr>
<tr>
<td>HSA match:up to $7010</td>
</tr>
<tr>
<td>$222</td>
</tr>
<tr>
<td>$55</td>
</tr>
<tr>
<td>$432</td>
</tr>
<tr>
<td>$300</td>
</tr>
</table>
</div>
<div class="table_container">
<table id="plans">
<tr><th>Plan C</th></tr>
<tr>
<td>$33.90</td>
</tr>
<tr>
<td>$1161.30</td>
</tr>
<tr>
<td>$513.30</td>
</tr>
<tr>
<td>$286.20</td>
</tr>
<tr>
<td>HSA match:up to $1350</td>
</tr>
<tr>
<td>HSA match:up to $1700</td>
</tr>
<tr>
<td>$80</td>
</tr>
</table>
<button onclick="Calculate()">Compare</button>
</div>
</div>

You mean
const container = document.getElementById("container");
document.getElementById("check").addEventListener("click", function() {
const checks = container.querySelectorAll(".select:checked")
if (checks.length >= 2) {
checks.forEach(chk => {
const table = chk.nextElementSibling;
console.log(table.querySelectorAll("td")[3].textContent)
})
}
})
td {
border: 1px solid black
}
<button type="button" id="check">Compare</button>
<div id="container">
<input type="checkbox" class="select">
<table>
<tbody>
<tr>
<td>Row 1</td>
<td>Table 1 Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2</td>
<td>Table 1 Row 2 Cell 2</td>
</tr>
</tbody>
</table>
<input type="checkbox" class="select">
<table>
<tbody>
<tr>
<td>Row 1</td>
<td>Table 2 Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2</td>
<td>Table 2 Row 2 Cell 2</td>
</tr>
</tbody>
</table>
<input type="checkbox" class="select">
<table>
<tbody>
<tr>
<td>Row 1</td>
<td>Table 3 Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2</td>
<td>Table 3 Row 2 Cell 2</td>
</tr>
</tbody>
</table>
</div>

Add input search box and fixed table header to html/css/javascript project

I'm working on a sample to accomplish the following:
Generate an html table of specific data (rows and columns will vary
in length and information).
Include a fixed header (the first two rows of the table should be fixed; with the remaining rows to scroll.
Input box to search all rows for entered letter(s).
Currently I can't get both of these options to work together and after clearing the input box the Search... box disappears. It should stay in the same row, right below the header and span all available columns.
My current test code:
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.top-container {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}
.header {
padding: 10px 16px;
background: #555;
color: #f1f1f1;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 50;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table>
<table border="1">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>
<input id="myInput" type="text" placeholder="Search..">
</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r#test.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r#test.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r#test.com</td>
</tr>
</tbody>
</table>
I'm more of a vba, sql and C# developer, so this is defiantly outside of my expertise.
I'm not sure how to fix this.
Thanks,
Jeff

How can I change the background color of a td when a link in the td is clicked?

I have tried searching, but I am stuck.
Basically I am making a jeopardy game board; which I created using a table. I would like to change the background-color of the td after it has been clicked on. The challenge I am facing is that (1) I am using a link to direct to the question/answer (yes, I know this could be done other ways, but I need to learn more to advance and I am working on that); (2) After searching for answers, I can't seem to get it to work with the code I have.
Here is my [JSFiddle]https://jsfiddle.net/hLyauL5a/)
Html:
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff </th>
<th>Stuff</th>
<th>Stuff</th>
<th>Stuff</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>200</td>
<td>200</td>
<td>200</td>
<td>200</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>300</td>
<td>300</td>
<td>300</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>400</td>
<td>400</td>
<td>400</td>
<td>400</td>
</tr>
<tr>
<td>500</td>
<td>500</td>
<td>500</td>
<td>500</td>
<td>500</td>
</tr>
</tbody>
</table>
CSS:
jQuery code:
$("table tr td").click(function() {
$(this).css("background", "#626975");
});
I would appreciate any help!

I see two problems. One, you have not included jquery or your javascript file in your html. Your jsfiddle does not have jquery loaded.
Two, assuming the above was just a problem getting your question across on Stack Overflow, you haven't waited for the document to load before attaching event listeners. The selector tries to select something that isn't there yet, and nothing is attached. What you need is:
$(document).on('ready', function(){
$("table tr td").click(function(e) {
$(this).css("background", "#626975");
});
});
Working example:
$(()=> {
$("table tr td").click(function() {
$(this).css("background", "#626975");
});
});
body {
cursor: pointer;
}
/*gameboard*/
table {
width: 100%;
border-collapse: collapse;
}
tr {
background: #1f293a;
color: #47ba04;
}
th {
background: #1f293a;
color: white;
font-weight: bold;
min-width: 200px;
}
td {
color: #47ba04;
background: #1f293a;
min-width: 100px;
height: 130px;
}
td,
th {
padding: 6px;
border: 1px solid #ccc;
text-align: center;
}
a {
color: #47ba04;
text-decoration: none;
}
/* For the question pages*/
#question,
#answers {
width: 100%;
height: 800px;
border: 1px solid black;
background-color: #1f293a;
color: white;
font-weight: bold;
}
div.question h2,
div.answers h2 {
margin: 0;
position: absolute;
top: 40%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff</th>
<th>Stuff</th>
<th>Stuff</th>
<th>Stuff</th>
</tr>
</thead>
<tbody>
<tr>
<td>100
</td>
<td>100
</td>
<td>100
</td>
<td>100
</td>
<td>100
</td>
</tr>
<tr>
<td>200
</td>
<td>200
</td>
<td>200
</td>
<td>200
</td>
<td>200
</td>
</tr>
<tr>
<td>300
</td>
<td>300
</td>
<td>300
</td>
<td>300
</td>
<td>300
</td>
</tr>
<tr>
<td>400
</td>
<td>400
</td>
<td>400
</td>
<td>400
</td>
<td>400
</td>
</tr>
<tr>
<td>500
</td>
<td>500
</td>
<td>500
</td>
<td>500
</td>
<td>500
</td>
</tr>
</tbody>
</table>

You could launch the links in a new window by adding target="_blank" attribute to your anchor tags:
<td>100</td>

$('a').click(function(e){
e.preventDefault();
$(this).parent().css('background-color','blue');
});
So,using JQuery, if you click on an tag, don't jump on whatever link it is, you prevent the default event, then you get its parent which is the element and you add the css style as shown. Here is the html that I used as an example:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td >Table</td>
<td bgcolor="#00FF00">$100</td>
</tr>

Generally, a hyperlinks like <a herf="" onclick="">contain two events: onclick and herf. The order of execution --- 'onclick' in front of 'herf'. so making onclick method return 'false' if you want to page can't jump on whatever link it is when you click hyperlink. Code is as follows.
$(function(){
$("a").on("click",function(){
$(this).css("background", "#626975");
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff</th>
<th>Stuff</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
</table>

apply column style to table body element

I have created the following table in html. I want to apply a style to table body elements in column which i have added a css class. But the style should not apply to header column. only to body column.
Here for a example i have add CSS class called "body-right". The result what i want is all the table body elements in column "Value" should "right align" except header column. How to achieve this in css.
Thanks a lot.
<table>
<thead>
<tr>
<td>Criteria</td>
<td>Description</td>
<td class="body-right">Value</td>
</tr>
</thead>
<tbody>
<tr>
<td>ABC</td>
<td>GGGGGG</td>
<td>35.63</td>
</tr>
<tr>
<td>XYZ</td>
<td>HHHHH</td>
<td>68.26</td>
</tr>
<tr>
<td>MNP</td>
<td>KKKKK</td>
<td>45.26</td>
</tr>
</tbody>
</table>

Use this:
tbody td:nth-of-type(3) {
text-align: right;
}
Example
table {
border-spacing: 0;
border-collapse: collapse;
font: 14px verdana;
}
td {
padding: 0.2em;
border: 1px solid gray;
}
tbody td:nth-of-type(3) {
text-align: right;
background: yellow;
width: 4em;
}
<table>
<thead>
<tr>
<td>Criteria</td>
<td>Description</td>
<td class="body-right">Value</td>
</tr>
</thead>
<tbody>
<tr>
<td>ABC</td>
<td>GGGGGG</td>
<td>35.63</td>
</tr>
<tr>
<td>XYZ</td>
<td>HHHHH</td>
<td>68.26</td>
</tr>
<tr>
<td>MNP</td>
<td>KKKKK</td>
<td>45.26</td>
</tr>
</tbody>
</table>

You can acheive this by specifying inline style for the header section seperately.
or make a little change in the css
like
thead .body-right { text-align:right; }