Javascript - Expand/Collapse table rows - javascript

Given the following table/code, I'd like to add two items. I don't know JavaScript well enough and this code was left by another programmer. The code works as expected in every other way.
Here are the two items:
The table should start in a collapsed state. All nodes should be
collapsed to the 'Grandparent' level.
There should be a link for 'expand all' and a separate 'collapse all' link.
Here is the table I'm using:
$(function() {
$('#mytable').on('click', '.toggle', function () {
var findChildren = function (tr) {
var depth = tr.data('depth');
return tr.nextUntil($('tr').filter(function () {
return $(this).data('depth') <= depth;
}));
};
var el = $(this);
var tr = el.closest('tr');
var children = findChildren(tr);
var subnodes = children.filter('.expand');
subnodes.each(function () {
var subnode = $(this);
var subnodeChildren = findChildren(subnode);
children = children.not(subnodeChildren);
});
if (tr.hasClass('collapse')) {
tr.removeClass('collapse').addClass('expand');
children.hide();
} else {
tr.removeClass('expand').addClass('collapse');
children.show();
}
return children;
});
});
table td, th {
border: 1px solid #eee;
font-family: Arial;
font-size: 16px;
}
.level0 td:first-child {
padding-left: 5px;
}
.level1 td:first-child {
padding-left: 25px;
}
.level2 td:first-child {
padding-left: 50px;
}
.level3 td:first-child {
padding-left: 75px;
}
.collapse .toggle {
background: url("open.gif");
background-repeat: no-repeat;
}
.expand .toggle {
background: url("closed.gif");
background-repeat: no-repeat;
}
.toggle {
height: 20px;
width: 20px;
display: inline-block;
}
.age {
text-align: center;
}
.nam {
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" style="border-collapse: collapse" cellpadding="6">
<thead>
<tr>
<th width="250px">Type</th>
<th width="50px">Age</th>
<th width="50px">Name</th>
</tr>
</thead>
<tr data-depth="0" class="collapse level0">
<td><span class="toggle collapse"></span>GRANDPARENT</td>
<td class="age">80</td>
<td class="nam">Ethel</td>
</tr>
<tr data-depth="1" class="collapse level1">
<td><span class="toggle"></span>CHILD 1</td>
<td class="age">55</td>
<td class="nam">Susan</td>
</tr>
<tr data-depth="2" class="collapse level2">
<td><span class="toggle collapse"></span>GRANDCHILD 1</td>
<td class="age">32</td>
<td class="nam">Kristen</td>
</tr>
<tr data-depth="3" class="collapse collapsable level3">
<td>GREAT GRANCHILD 1</td>
<td class="age">12</td>
<td class="nam">Layla</td>
</tr>
<tr data-depth="1" class="collapse collapsable level1">
<td><span class="toggle collapse"></span>CHILD 2</td>
<td class="age">52</td>
<td class="nam">Joanne</td>
</tr>
<tr data-depth="2" class="collapse collapsable level2">
<td><img src="list.gif"/>GRANDCHILD 2</td>
<td class="age">28</td>
<td class="nam">Marie</td>
</tr>
</table>
What do I need to add to the JavaScript to accomplish this?


Is this the kind of result you want ?
(I played a little with your code to make it work more or less like I think it should.)
Anyway, I don't understand all about what has been done, and I propose you only a JS solution.
But… I think the classes in your trs could be modified to get your “all hidden” result at the loading of the page without using any JS.
I commented where I added the new things:
EDIT: And I cleaned a little the code, too.
$('.collapse').on('click', function() {
//console.log($(this).attr('data-depth'));
var findChildren = function(tr) {
var depth = tr.data('depth');
return tr.nextUntil($('tr').filter(function() {
return $(this).data('depth') <= depth;
}));
};
var children = findChildren($(this));
if ($(children).is(':visible')) {
$(this).addClass("closed");
$(children).hide();
} else {
$(this).removeClass("closed");
$(children).show();
var children = findChildren($(".closed"));
$(children).hide();
}
});
// HERE IS THE CODE I ADDED
$('#show_all').on('click', function() {
$("#mytable tr.collapse").removeClass("closed").show();
});
$('#hide_all').on('click', function() {
$("#mytable tr.collapse:not([data-depth='0'])").hide();
$("#mytable tr.collapse.level0").addClass("closed");
});
$(document).ready(function() {
$('#hide_all').trigger('click');
});
table td,
th {
border: 1px solid #eee;
font-family: Arial;
font-size: 16px;
}
.level0 td:first-child {
padding-left: 10px;
}
.level1 td:first-child {
padding-left: 30px;
}
.level2 td:first-child {
padding-left: 50px;
}
.level3 td:first-child {
padding-left: 70px;
}
.age {
text-align: center;
}
.nam {
text-align: left;
}
.closed td:first-child::before {
content: "• ";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- HERE IS THE HTML I ADDED FOR THE BUTTONS -->
<button id="show_all"><p>Show all</p></button>
<button id="hide_all"><p>Hide all</p></button>
<!-- END -->
<table id="mytable" style="border-collapse: collapse" cellpadding="6">
<thead>
<tr>
<th width="250px">Type</th>
<th width="50px">Age</th>
<th width="50px">Name</th>
</tr>
</thead>
<tr data-depth="0" class="collapse level0">
<td>GRANDPARENT</td>
<td class="age">80</td>
<td class="nam">Ethel</td>
</tr>
<tr data-depth="1" class="collapse level1">
<td>CHILD 1</td>
<td class="age">55</td>
<td class="nam">Susan</td>
</tr>
<tr data-depth="2" class="collapse level2">
<td>GRANDCHILD 1</td>
<td class="age">32</td>
<td class="nam">Kristen</td>
</tr>
<tr data-depth="3" class="collapse level3">
<td>GREAT GRANCHILD 1</td>
<td class="age">12</td>
<td class="nam">Layla</td>
</tr>
<tr data-depth="1" class="collapse level1">
<td>CHILD 2</td>
<td class="age">52</td>
<td class="nam">Joanne</td>
</tr>
<tr data-depth="2" class="collapse level2">
<td>GRANDCHILD 2</td>
<td class="age">28</td>
<td class="nam">Marie</td>
</tr>
</table>
And here is the snippet before my last edition, in case the “cleaned” one doesn't fit your needs:
$('.collapse').on('click', function() {
//console.log($(this).attr('data-depth'));
var findChildren = function(tr) {
var depth = tr.data('depth');
return tr.nextUntil($('tr').filter(function() {
return $(this).data('depth') <= depth;
}));
};
var children = findChildren($(this));
if ($(children).is(':visible')) {
$(children).hide();
} else {
$(children).show();
}
});
// HERE IS THE CODE I ADDED
$('#show_all').on('click', function() {
$("#mytable tr.collapse:not([data-depth='0'])").show();
});
$('#hide_all').on('click', function() {
$("#mytable tr.collapse:not([data-depth='0'])").hide();
});
$(document).ready(function() {
$('#hide_all').trigger('click');
});
table td,
th {
border: 1px solid #eee;
font-family: Arial;
font-size: 16px;
}
.level0 td:first-child {
padding-left: 5px;
}
.level1 td:first-child {
padding-left: 25px;
}
.level2 td:first-child {
padding-left: 50px;
}
.level3 td:first-child {
padding-left: 75px;
}
.collapse .toggle {
background: url("open.gif");
background-repeat: no-repeat;
}
.expand .toggle {
background: url("closed.gif");
background-repeat: no-repeat;
}
.toggle {
height: 20px;
width: 20px;
display: inline-block;
}
.age {
text-align: center;
}
.nam {
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- HERE IS THE HTML I ADDED -->
<button id="show_all"><p>Show all</p></button>
<button id="hide_all"><p>Hide all</p></button>
<!-- END -->
<table id="mytable" style="border-collapse: collapse" cellpadding="6">
<thead>
<tr>
<th width="250px">Type</th>
<th width="50px">Age</th>
<th width="50px">Name</th>
</tr>
</thead>
<tr data-depth="0" class="collapse level0">
<td><span class="toggle collapse"></span>GRANDPARENT</td>
<td class="age">80</td>
<td class="nam">Ethel</td>
</tr>
<tr data-depth="1" class="collapse level1">
<td><span class="toggle"></span>CHILD 1</td>
<td class="age">55</td>
<td class="nam">Susan</td>
</tr>
<tr data-depth="2" class="collapse level2">
<td><span class="toggle collapse"></span>GRANDCHILD 1</td>
<td class="age">32</td>
<td class="nam">Kristen</td>
</tr>
<tr data-depth="3" class="collapse collapsable level3">
<td>GREAT GRANCHILD 1</td>
<td class="age">12</td>
<td class="nam">Layla</td>
</tr>
<tr data-depth="1" class="collapse collapsable level1">
<td><span class="toggle collapse"></span>CHILD 2</td>
<td class="age">52</td>
<td class="nam">Joanne</td>
</tr>
<tr data-depth="2" class="collapse collapsable level2">
<td><img src="list.gif" />GRANDCHILD 2</td>
<td class="age">28</td>
<td class="nam">Marie</td>
</tr>
</table>

Related

Check table and make tr content bold based on values of two matching columns in same table

I am working on responsive table and want to make row content bold if it matches the current date.
I am keeping first-child th & td hidden as i only need it for certain function
Based on value in <td data-label="TodaysDate">06-05-2020</td> and <td data-label="Date">05-05-2020</td>
if value if TodaysDate = Date then i need to make this row bold.
how can i do this using javascript
https://codepen.io/KGuide/pen/MWwMZzP
function compareCellValues() {
var rows = $(".ramadan-time").find("tbody tr"); //returns all table rows
rows.each(function() { //iterate over each row.
var thisRow = $(this), //this is the current row
TodaysDate = thisRow.find(".TodaysDate"), //this is the first value
sDate = thisRow.find(".Date"); //this is the second value
if (TodaysDate.text() !== sDate.text()) {
thisRow.css("font-weight", "bold");
}
thisRow.find(".TodaysDate").text(parseInt(TodaysDate.text()) - parseInt(sDate.text()));
});
}
window.onload = compareCellValues();
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
.ramadan-time > thead tr th:first-child{color:red; display:none;}
.ramadan-time > tbody tr td:first-child{color:red; display:none;}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
font-size: 12px;
}
table th {
font-size: .85em;
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#media screen and (max-width: 380px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
<table class="ramadan-time">
<thead>
<tr>
<th scope="col">TodaysDate</th>
<th scope="col">Date</th>
<th scope="col">Day</th>
<th scope="col">Ramadan</th>
<th scope="col">April/May</th>
<th scope="col">Imsak</th>
<th scope="col">Fajr</th>
<th scope="col">Sunrise</th>
<th scope="col">Dhuhr</th>
<th scope="col">Asr</th>
<th scope="col">Maghrib</th>
<th scope="col">Isha</th>
</tr>
</thead>
<tbody>
<tr>
<td class="TodaysDate" data-label="TodaysDate">06-05-2020</td>
<td class="Date" data-label="Date">05-05-2020</td>
<td data-label="Day">Friday</td>
<td data-label="Ramadan">1</td>
<td data-label="April/May">24</td>
<td data-label="Imsak">4:17</td>
<td data-label="Fajr">4:27</td>
<td data-label="Sunrise">5:45</td>
<td data-label="Dhuhr">12:20</td>
<td data-label="Asr">3:49</td>
<td data-label="Maghrib">6:49</td>
<td data-label="Isha">8:07</td>
</tr>
<tr>
<td class="TodaysDate" data-label="TodaysDate">6-05-2020</td>
<td class="Date" data-label="Date">06-05-2020</td>
<td data-label="Day">Saturday</td>
<td data-label="Ramadan">2</td>
<td data-label="April/May">25</td>
<td data-label="Imsak">4:16</td>
<td data-label="Fajr">4:26</td>
<td data-label="Sunrise">5:44</td>
<td data-label="Dhuhr">12:20</td>
<td data-label="Asr">3:50</td>
<td data-label="Maghrib">6:49</td>
<td data-label="Isha">8:08</td>
</tr>
<tr>
<td class="TodaysDate" data-label="TodaysDate">6-05-2020</td>
<td class="Date" data-label="Date">07-05-2020</td>
<td data-label="Day">Sunday</td>
<td data-label="Ramadan">3</td>
<td data-label="April/May">26</td>
<td data-label="Imsak">4:15</td>
<td data-label="Fajr">4:25</td>
<td data-label="Sunrise">5:43</td>
<td data-label="Dhuhr">12:19</td>
<td data-label="Asr">3:48</td>
<td data-label="Maghrib">6:50</td>
<td data-label="Isha">8:10</td>
</tr>
</tbody>
</table>
I am using following code to
function compareCellValues() {
var rows = $(".ramadan-time").find("tbody tr"); //returns all table rows
rows.each(function() { //iterate over each row.
var thisRow = $(this), //this is the current row
TodaysDate = thisRow.find(".TodaysDate"), //this is the first value
sDate = thisRow.find(".Date"); //this is the second value
if (TodaysDate.text() !== sDate.text()) {
thisRow.css("font-weight", "bold");
}
thisRow.find(".TodaysDate").text(parseInt(TodaysDate.text()) - parseInt(sDate.text()));
});
}
window.onload = compareCellValues();

It working for me i had put date in as 6-05-2020 & comparing it with 06-05-2020
after fixing the data script worked fine.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - A Pen by KGuide</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<table class="ramadan-time">
<thead>
<tr>
<th scope="col">TodaysDate</th>
<th scope="col">Date</th>
<th scope="col">Day</th>
<th scope="col">Ramadan</th>
<th scope="col">April/May</th>
<th scope="col">Imsak</th>
<th scope="col">Fajr</th>
<th scope="col">Sunrise</th>
<th scope="col">Dhuhr</th>
<th scope="col">Asr</th>
<th scope="col">Maghrib</th>
<th scope="col">Isha</th>
</tr>
</thead>
<tbody>
<tr>
<td class="TodaysDate" data-label="TodaysDate">06-05-2020</td>
<td class="Date" data-label="Date">05-05-2020</td>
<td data-label="Day">Friday</td>
<td data-label="Ramadan">1</td>
<td data-label="April/May">24</td>
<td data-label="Imsak">4:17</td>
<td data-label="Fajr">4:27</td>
<td data-label="Sunrise">5:45</td>
<td data-label="Dhuhr">12:20</td>
<td data-label="Asr">3:49</td>
<td data-label="Maghrib">6:49</td>
<td data-label="Isha">8:07</td>
</tr>
<tr>
<td class="TodaysDate" data-label="TodaysDate">06-05-2020</td>
<td class="Date" data-label="Date">06-05-2020</td>
<td data-label="Day">Saturday</td>
<td data-label="Ramadan">2</td>
<td data-label="April/May">25</td>
<td data-label="Imsak">4:16</td>
<td data-label="Fajr">4:26</td>
<td data-label="Sunrise">5:44</td>
<td data-label="Dhuhr">12:20</td>
<td data-label="Asr">3:50</td>
<td data-label="Maghrib">6:49</td>
<td data-label="Isha">8:08</td>
</tr>
<tr>
<td class="TodaysDate" data-label="TodaysDate">06-05-2020</td>
<td class="Date" data-label="Date">07-05-2020</td>
<td data-label="Day">Sunday</td>
<td data-label="Ramadan">3</td>
<td data-label="April/May">26</td>
<td data-label="Imsak">4:15</td>
<td data-label="Fajr">4:25</td>
<td data-label="Sunrise">5:43</td>
<td data-label="Dhuhr">12:19</td>
<td data-label="Asr">3:48</td>
<td data-label="Maghrib">6:50</td>
<td data-label="Isha">8:10</td>
</tr>
</tbody>
</table>

Prevent inner table from Filtering in Nested Html table

I have two nested tables. One outer table and inside every row of outer table I have inner table. My problem is when I am filtering using searchBox it filters both the tables outer and inner. I don't want to filter my inner table rows. Look at my problem I don't want my inner table to be filtered.
var $rows = $('#top_table tr');
$('#txtsearch').keyup(function () {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function () {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
tr.top_tr td {
border-bottom: 1px solid black;
min-width: 16%;
}
th {
font: bold 11px"Helvetica Neue", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(images/bg_header.jpg) no-repeat;
width: 16%;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 0px;
color: #4f6b72;
width: 14%;
}
td:first-child {
border-left: 1px solid #C1DAD7;
}
table {
padding: 0px;
}
#top_table {
padding: 10px;
width: 800px;
}
body {
padding: 10px;
}
.subtable {
width: 100%;
}
.body-td {
border: none;
width: 16%;
}
.collapse {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
display: inline;
width: 100%;
float: left;
}
tr.collapse>td {
display: table;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="text" id="txtsearch" />
<table id="top_table">
<thead>
<tr>
<th>List Name</th>
<th>No. Records</th>
<th>Avail. Records</th>
<th>Creation Date</th>
<th>Last Used</th>
<th>Performance</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="6">
<table class="subtable">
<tbody>
<tr class="top_tr accordion-toggle" data-toggle="collapse" data-parent="#top_table" href="#collapseOne">
<td>LIST NO. 1</td>
<td>30000</td>
<td>3340</td>
<td>05-26-2004</td>
<td>21 days ago</td>
<td>7.3 % TRANSFER RATE</td>
</tr>
<tr >
<td colspan="6">
<table>
<tbody id="collapseOne" class="accordion-body collapse">
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="6">
<table class="subtable">
<tbody>
<tr class="top_tr accordion-toggle" data-toggle="collapse" data-parent="#top_table" href="#collapseTwo">
<td>LIST NO. 2</td>
<td>30000</td>
<td>3340</td>
<td>05-26-2004</td>
<td>21 days ago</td>
<td>7.3 % TRANSFER RATE</td>
</tr>
<tr >
<td colspan="6">
<table>
<tbody id="collapseTwo" class="accordion-body collapse">
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="6">
<table class="subtable">
<tbody>
<tr class="top_tr">
<td>LIST NO. 3</td>
<td>30000</td>
<td>3340</td>
<td>05-26-2004</td>
<td>21 days ago</td>
<td>7.3 % TRANSFER RATE</td>
</tr>
<tr>
<td colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Everyone i got an answer which is very much shocking i just focused on what i actually want and that was just to ignore even rows of table that contains inner tables.
And the answer to this is :var rows= $("tr:odd") and then i applied filteration on these rows .:) Thanks for you precious time.

Popover menu in VueJS without JQuery?

In this answer is there exactly what I am looking for. A menu pops up, when clicking on a table row. The only problem is it uses JQuery...
So my question is, can the same be done without JQuery? Perhaps with VueJS, which I am using?

Translated the example
let rows = document.querySelectorAll("tr");
let btnPane = document.getElementById("button-pane");
document.active = '';
if (window.NodeList && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = Array.prototype.forEach;
}
btnPane.addEventListener("mouseover", function() {
btnPane.style.display = "block";
if(document.active)
document.active.style.backgroundColor = "lightblue";
});
btnPane.addEventListener("mouseleave", function() {
btnPane.style.display = "none";
if(document.active)
document.active.style.backgroundColor = "";
});
rows.forEach(function(row) {
row.addEventListener("click", function(e) {
var posLeft = e.clientX + 10;
var posBottom = this.offsetTop + this.offsetHeight+8;
btnPane.style.top = posBottom + "px";
btnPane.style.left = posLeft + "px";
btnPane.style.display = "block";
document.active = this;
});
row.addEventListener("mouseleave", function() {
btnPane.style.display = "none";
});
});
table {
border-collapse: collapse;
}
th, td{
border-bottom: 1px solid #aaa;
}
#mytable tbody tr:hover {
background-color: lightblue;
}
.button-pane {
display: none;
position: absolute;
float: left;
top: 0px;
left: 0px;
background-color: lightblue;
width: 150px;
height: 30px;
padding: 0px;
text-align: center;
}
.button-pane button {
display: inline;
cursor: pointer;
}
<table id="mytable" border="1" width="100%">
<thead>
<tr>
<td>HEADER 1</td>
<td>HEADER 2</td>
<td>HEADER 3</td>
<td>HEADER 4</td>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>a</td>
<td>aa</td>
<td>aaa</td>
</tr>
<tr>
<td>Item 2</td>
<td>b</td>
<td>bb</td>
<td>bbb</td>
</tr>
<tr>
<td>Item 3</td>
<td>c</td>
<td>cc</td>
<td>ccc</td>
</tr>
</tbody>
</table>
<div id="button-pane" class="button-pane">
<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
</div>
</div>

Variable Table Inner components width not working html css

I am trying to build this excel table with html and css. The problem i kept facing is the when i try to add different number of columns for different rows, It surpasses the border limit and extends by itself. My intent is to replicate the contents of the picture.
table
{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
border: 3px solid #151515;
}
th, td
{
border: 1px solid #151515;
padding: 12px;
text-align: center;
}
th
{
font-weight: bold;
}
tfoot tr:nth-child(2)
{
font-weight: normal;
height: 100px;
}
.colored td
{
background-color: #aaaaaa;
}
<table>
<tbody>
<tr>
<th colspan="4" class="title">PURCHASE DETAILS</th>
</tr>
<tr class="colored">
<th rowspan="2">BUDGET CODE:</th>
<td>Account Code</td>
<td>Cost Center</td>
<td>Project Code</td>
<td>DEA</td>
</tr>
<tr>
<td>5458</td>
<td>22222</td>
<td>3658954</td>
<td>95874</td>
</tr>
<tr>
<th>PO Number:</th>
<td>PO/SC/2010/33</td>
<th>Supplier:</th>
<td>STORM TECH</td>
</tr>
<tr>
<th>SOF:</th>
<td>00254584</td>
<th>Value (Purchase Price USD):</th>
<td><b>1,084.89</b></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Plan After Award Ends:</th>
<td colspan="2">Carry Over</td>
</tr>
</tfoot>
</table>
If anybody can assist please.

Not sure table layout is the best choice here, but it can be done. Just create more cells per row and span the cells you need over 2 or 3 "cells"
table
{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
border: 3px solid #151515;
}
th, td
{
border: 1px solid #151515;
padding: 12px;
text-align: center;
}
th
{
font-weight: bold;
}
tfoot tr:nth-child(2)
{
font-weight: normal;
height: 100px;
}
.colored td
{
background-color: #aaaaaa;
}
<table>
<tbody>
<tr>
<th colspan="8" class="title">PURCHASE DETAILS</th>
</tr>
<tr class="colored">
<th rowspan="2">BUDGET CODE:</th>
<td colspan="2">Account Code</td>
<td colspan="2">Cost Center</td>
<td colspan="2">Project Code</td>
<td>DEA</td>
</tr>
<tr>
<td colspan="2">5458</td>
<td colspan="2">22222</td>
<td colspan="2">3658954</td>
<td>95874</td>
</tr>
<tr>
<th>PO Number:</th>
<td colspan="3">PO/SC/2010/33</td>
<th colspan="2">Supplier:</th>
<td colspan="2">STORM TECH</td>
</tr>
<tr>
<th>SOF:</th>
<td colspan="3">00254584</td>
<th colspan="2">Value (Purchase Price USD):</th>
<td colspan="2"><b>1,084.89</b></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Plan After Award Ends:</th>
<td colspan="6">Carry Over</td>
</tr>
</tfoot>
</table>

Responsive Table not formatting after DIV Change/Load, until reszied

Example
Div Page
http://www.uller.com/dump/ajaxresponseissue/index.html
Source code, works fine if go direct
http://www.uller.com/dump/ajaxresponseissue/table.html
Displaying a table dynamically into a Div table has responsive script, however when the div is loaded the Script will not run until the window is rezised.
Trying to find a way to auto trigger the script on load of the div.
Below is code examples from that link.
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ajax Response Issuet</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<div id="output"></div>
<script>
// Function called by Period select
$(document).ready(function () {
$("#output").load("table.html #loadMeOnly");$.getScript('responsibe-tables.js');$.getScript('jquery.js');
});
</script>
</body>
</html>
called table js
<div id="loadMeOnly">
<style type="text/css">
table th { font-weight: bold; }
table td, table th { padding: 9px 10px; text-align: left; }
/* Mobile */
#media only screen and (max-width: 979px) {
table.responsive { margin-bottom: 0; }
.pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
.pinned table { border-right: none; border-left: none; width: 100%; }
.pinned table th, .pinned table td { white-space: nowrap; }
.pinned td:last-child { border-bottom: 0; }
div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; }
div.table-wrapper div.scrollable table { margin-left: 35%; }
div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; }
table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; }
table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; }
}
</style>
<table width='100%' class="responsive">
<tr>
<th scope='col'> </th>
<th colspan='3' scope='col'><center>
Invited
</center></th>
<th colspan='2' scope='col'><center>
Accepted
</center></th>
<th colspan='2' scope='col'><center>
Confirmed
</center></th>
<th colspan='2' scope='col'><center>
Attended
</center></th>
<th scope='col'><center>
Sold
</center></th>
</tr>
<tr>
<th scope='col'>Name</th>
<th scope='col'>P</th>
<th scope='col'>G</th>
<th scope='col'>Total</th>
<th scope='col'>##</th>
<th scope='col'>%</th>
<th scope='col'>##</th>
<th scope='col'>%</th>
<th scope='col'>##</th>
<th scope='col'>%</th>
<th scope='col'>##</th>
</tr>
<tr>
<td> House</td>
<td onclick='document.location = "?Databuild&Account=28&Type=P";' style='cursor:pointer;'></td>
<td onclick='document.location = "?Databuild&Account=28&Type=G";' style='cursor:pointer;'>1</td>
<td onclick='document.location = "?Databuild&Account=28";' style='cursor:pointer;'>1</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
</tr>
<tr>
<td>ss ss</td>
<td onclick='document.location = "?Databuild&Account=68&Type=P";' style='cursor:pointer;'>9</td>
<td onclick='document.location = "?Databuild&Account=68&Type=G";' style='cursor:pointer;'>32</td>
<td onclick='document.location = "?Databuild&Account=68";' style='cursor:pointer;'>41</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
</tr>
<tr>
<td>xx xx</td>
<td onclick='document.location = "?Databuild&Account=70&Type=P";' style='cursor:pointer;'></td>
<td onclick='document.location = "?Databuild&Account=70&Type=G";' style='cursor:pointer;'>28</td>
<td onclick='document.location = "?Databuild&Account=70";' style='cursor:pointer;'>28</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
</tr>
<tr>
<td>vv vv</td>
<td onclick='document.location = "?Databuild&Account=101&Type=P";' style='cursor:pointer;'>1</td>
<td onclick='document.location = "?Databuild&Account=101&Type=G";' style='cursor:pointer;'>28</td>
<td onclick='document.location = "?Databuild&Account=101";' style='cursor:pointer;'>29</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
</tr>
<tr>
<td>yy yy</td>
<td onclick='document.location = "?Databuild&Account=136&Type=P";' style='cursor:pointer;'>2</td>
<td onclick='document.location = "?Databuild&Account=136&Type=G";' style='cursor:pointer;'>19</td>
<td onclick='document.location = "?Databuild&Account=136";' style='cursor:pointer;'>21</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
</tr>
<tr>
<td><strong>Total</strong></td>
<td onclick='document.location = "?Databuild&Account=All&Type=P";' style='cursor:pointer;'>12</td>
<td onclick='document.location = "?Databuild&Account=All&Type=G";' style='cursor:pointer;'>108</td>
<td onclick='document.location = "?Databuild&Account=All";' style='cursor:pointer;'>120</td>
<td>0</td>
<td>0%</td>
<td>0</td>
<td>0%</td>
<td>0</td>
<td>0%</td>
<td>0</td>
</tr>
</table>
</div>

Categories

Resources