Blend in tr::before number with table? - javascript

I have got a HTML table built like this:
<html>
<head>
<meta charset="UTF-8">
<style>
body {font-family:'-webkit-system-font', 'HelveticaNeue-Light';}
</style><style type="text/css">
table.sortable, tbody {
counter-reset: sortabletablescope;
vertical-align: middle;
}
table.sortable, thead tr::before {
content: "";
display: table-cell;
vertical-align: middle;
}
table.sortable, tbody tr::before {
content: counter(sortabletablescope);
counter-increment: sortabletablescope;
display: table-cell;
vertical-align: middle;
text-align: center;
}
table {
border-spacing: 0;
width: 50%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
th, td {
text-align: left;
font-size: 16px;
padding: 6px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
</style>
</head>
<body>
<center>
<center>
<table class="sortable" id="myTable">
<tr>
<th>Name</th>
<th>Play</th>
<tr>
<td>1990<br>data1</td><td>data2</td></tr>
<td>2000<br>data3</td><td>data4</td></tr>
</table>
<script type="text/javascript" src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
</center>
</body>
</html>
I am trying to move the list number so it looks like its part of the table, and not printed before, so there is no whitespace before "Name" in the table header. Like how it looks here (here the numbers are added manually):
<html>
<head>
<meta charset="UTF-8">
<style>
body {font-family:'-webkit-system-font', 'HelveticaNeue-Light';}
</style><style type="text/css">
table {
border-spacing: 0;
width: 50%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
th, td {
text-align: left;
font-size: 16px;
padding: 6px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
</style>
</head>
<body>
<center>
<center>
<table class="sortable" id="myTable">
<tr>
<th>Name</th>
<th>Play</th>
<tr>
<td>1. 1990<br>data1</td><td>data2</td></tr>
<td>2. 2000<br>data3</td><td>data4</td></tr>
</table>
<script type="text/javascript" src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
</center>
</body>
</html>
I have managed to get the number where I want it by using
position: relative; bottom: -6px;
position: relative; left: +25px;
But that doesn't remove the whitespaces before "Name" in the table header. Is this possible to change?


You can use a CSS counter indeed via the :before pseudo-element style like a table-cell: (but there got to be one on each row to preserve the right amount of columns)
Sizing the pseudo-element will allow you to set a negative text-indent on the first th to align it to the far left
example
/* pseudo tr:before for CSS COUNTER for table tr */
tr:before {
content: '';
display: table-cell;
vertical-align: middle;
}
thead th:first-child {
text-indent: -1.5em;
}
tbody {
counter-reset: trs
}
tbody tr:before {
counter-increment: trs;
content: counter(trs)'. ';
width: 1.5em;
text-align: right;
}
/* end css counter */
body {
font-family: '-webkit-system-font', 'HelveticaNeue-Light';
}
table {
border-spacing: 0;
width: 50%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
th,
td {
text-align: left;
font-size: 16px;
padding: 6px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<table class="sortable" id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Play</th>
</tr>
</thead>
<tbody>
<tr>
<td>1990<br>data1</td>
<td>data2</td>
</tr>
<tr>
<td>2000<br>data3</td>
<td>data4</td>
</tr>
<tr>
<td>2010<br>data1</td>
<td>data2</td>
</tr>
<tr>
<td>2020<br>data3</td>
<td>data4</td>
</tr>
</tbody>
</table>
Mind the structure of your table to have no surprise once rendered by browsers.
if it needs to be inside the first cell, then set the counter to the first td and let it float
/* pseudo tr:before for CSS COUNTER for table tr */
tbody {
counter-reset: trs
}
tbody td:first-child:before {
counter-increment: trs;
content: counter(trs)'. ';
float:left
}
/* end css counter */
body {
font-family: '-webkit-system-font', 'HelveticaNeue-Light';
}
table {
border-spacing: 0;
width: 50%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
th,
td {
text-align: left;
font-size: 16px;
padding: 6px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<table class="sortable" id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Play</th>
</tr>
</thead>
<tbody>
<tr>
<td>1990<br>data1</td>
<td>data2</td>
</tr>
<tr>
<td>2000<br>data3</td>
<td>data4</td>
</tr>
<tr>
<td>2010<br>data1</td>
<td>data2</td>
</tr>
<tr>
<td>2020<br>data3</td>
<td>data4</td>
</tr>
</tbody>
</table>

Related

how can i make the table responsive with fixed header? Means it scrolls when it reaches maximum viewpoint and also header fixed at its point

How can i make the table responsive with fixed header? means it scrolls when reaches maximum viewpoint. Well, i don't want to scroll the whole page on reaching max viewpoint instead i want table to be scrolled. Also fixed header is important. I tried with box-sizing: border-box; and overflow-x:scroll;but it didn't worked , help me to create a responsive table. Thanks.
table{
border-collapse: separate;
border-spacing: 0;
width: 100%;
box-sizing: border-box;
}
thead,tbody{
box-sizing: border-box;
overflow: auto;
}
th,td{
padding: 6px 15px;
}
th{
background: #42444e;
color: #fff;
text-align: left;
position: static;
top: 50px;
}
tbody tr td img{
flex-wrap: wrap;
pointer-events: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
width: 30px;
height: 30px;
float: none;
display:block;
object-fit: fill;
border-radius: 10%;
}
tr:first-child th:first-child {
border-top-left-radius: 6px;
}
tr:first-child th:last-child {
border-top-right-radius: 6px;
}
td{
border-right: 1px solid #c6c9cc;
border-bottom: 1px solid #c6c9cc;
}
td:first-child {
border-left: 1px solid #c6c9cc;
}
tr:nth-child(even) td {
background: #eaeaed;
}
tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
<table>
<thead>
<tr>
<th>Image</th>
<th>ID</th>
<th>Date</th>
<th>Name</th>
<th>Email</th>
<th>Phone no.</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
</thead>
</table>

I reviewed your codepan and conclude with that, You need to add some CSS property in your CSS file and it's work.
tbody {
height: 200px;
display: inline-block;
overflow: auto;
}
thead tr th{
position: sticky;
top:0;
left:0;
right:0;
}

set position sticky of header
and for table overflow-y set as auto
.fixTable {
overflow-y: auto;
height: 110px;
}
.fixTable thead th {
position: sticky;
top: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px 15px;
border: 2px solid #529432;
}
th {
background: #060606;
}
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="fixTable">
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>2.1</td>
</tr>
<tr>
<td>1.2</td>
<td>2.2</td>
</tr>
<tr>
<td>1.3</td>
<td>2.3</td>
</tr>
<tr>
<td>1.4</td>
<td>2.4</td>
</tr>
<tr>
<td>1.5</td>
<td>2.5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

styling pdf html table so that it will not display over other elements

Hi im having a problem where my table will overlap with my footer as shown
and here is the code for the pdf file in html and the ${allId} is a variable to call the data
const html = `
<html>
<table class="demo">
<thead>
<tr>
<th>Lamp Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>${allId}</td> //Repeated until 40 times
</tr>
</tbody>
</table>
<div class="footer">
<p
style="font-size: 15px;
text-align: left;"
>Page counter
</p>
<p
style="font-size: 15px;
font-weight: bold;"
>Copyright
</p>
</html>
<style>
#page {
size: landscape;
}
.demo {
border:1px solid #C0C0C0;
border-collapse:collapse;
padding:5px;
width:100%;
table-layout: fixed;
}
.demo tbody {
max-height:350px;
}
.demo th {
border:1px solid #C0C0C0;
padding:5px;
background:#F0F0F0;
}
.demo td {
border:1px solid #C0C0C0;
padding:5px;
max-height:350px;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
color: black;
text-align: center;
flex-direction:column;
margin-top: 25px;
}
</style>
`;
can someone point out what is the problem in my styling is? I want the table to appear until it reach the footer and continue to do so for the next pages

Bootstrap table columns to be collapsible at mobile view

I am trying to design a table wherein at mobile view the last two to three columns which are not visible in mobile view should be made collapsible using only CSS and if possible Javascript not jQuery. This is to be done for salesforce web application so no jQuery is allowed. Any help would great.
Tried with this example:
http://codepen.io/anon/pen/QwPVNW
This is somewhat similar but I am unable to break the last two to three columns data and show it below.
body {
font-family: arial;
}
table {
border: 1px solid #ccc;
width: 100%;
margin: 0;
padding: 0;
border-collapse: collapse;
border-spacing: 0;
}
table tr {
border: 1px solid #ddd;
padding: 5px;
}
table th,
table td {
padding: 10px;
text-align: center;
}
table th {
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table thead {
display: none;
}
table tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
}
table td {
display: block;
text-align: right;
font-size: 13px;
border-bottom: 1px dotted #ccc;
}
table td:last-child {
border-bottom: 0;
}
table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}
<table>
<thead>
<tr>
<th>Payment</th>
<th>Issue Date</th>
<th>Amount</th>
<th>Period</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Payment">Payment #1</td>
<td data-label="Issue Date">02/01/2015</td>
<td data-label="Amount">$2,311</td>
<td data-label="Period">01/01/2015 - 01/31/2015</td>
</tr>
<tr>
<td data-label="Payment">Payment #2</td>
<td data-label="Issue Date">03/01/2015</td>
<td data-label="Amount">$3,211</td>
<td data-label="Period">02/01/2015 - 02/28/2015</td>
</tr>
</tbody>
</table>

How to remove the added append in tbody?

I have this snippet below working fine. How to get the ID or Class of the append data from the checkbox. As I try below code $('.chk').click(function(){
console.log(cc);}) but its not working. What I want to happen is After the I added two lines and I check the 1st checkbox in added data and click the remove it will remove because it has a check.
$(".checkAll").change(function() {
$(".selectall").prop('checked', $(this).prop("checked"));
$(".gone").removeAttr('checked');
});
$('.vv .ww').on('click', function() {
$("tbody").append('<tr class="remove"><td><input class="chk" type="checkbox" <td></tr>');
});
$('.chk').click(function() {
console.log(cc);
})
$('.gone').click(function() {
var aa = $('.chk').val();
var bb = $('.chk').is('checked');
console.log(aa);
console.log(bb);
$(".remove").remove();
});
#media only screen and (max-width: 640px) {
/* Force table to not be like tables anymore */
.no-more-tables table,
.no-more-tables thead,
.no-more-tables tbody,
.no-more-tables th,
.no-more-tables td,
.no-more-tables tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
.no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.hdv {
width: 46%;
padding: 5px;
display: inline-block;
}
.dsp {
font-weight: bold;
}
.no-more-tables tr {
border: 1px solid #ccc;
}
.no-more-tables td {
/* Behave like a "row" */
width: 100%;
border: none;
border-bottom: 1px solid #eee;
white-space: normal;
text-align: left;
}
/*
Label the data
*/
}
.cf {
width: 100%;
}
.cf > tr > th {
text-align: left;
}
.cf > tbody > tr > td {
height: 25px;
}
.newvariation > td > input:focus {
outline: 0px !important;
-webkit-appearance: none;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
.vv > div {
margin: 5px;
display: inline-block;
cursor: pointer;
}
#media only screen and (min-width: 641px) {
.dsp {
visibility: hidden;
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="no-more-tables">
<table class="table-bordered table-striped table-condensed cf">
<thead class="cf">
<tr>
<th class="c1">
<input type="checkbox" class="checkAll" />
</th>
<th class="c2">Product</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="selectall" />
</td>
<td>
<span class="hdv dsp">Product</span>
<span class="hdv" contenteditable="true">iPhone 7 Plus</span>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<div class="vv">
<div class="ww">+ Add new Line</div>
<div class="gone">- Remove selected</div>
</div>

Basically you just need to select only checked checkbox with chk class, then find these parent with remove class.
Bellow is the revision of your snippet.
$(".checkAll").change(function() {
$(".selectall").prop('checked', $(this).prop("checked"));
$(".gone").removeAttr('checked');
});
$('.vv .ww').on('click', function() {
$("tbody").append('<tr class="remove"><td><input class="chk" type="checkbox" <td></tr>');
});
$('.chk').click(function() {
console.log(cc);
})
$('.gone').click(function() {
$('input:checked.chk').each(function(idx, item){
var row = $(item).parents(".remove");
if (row != null)
row.remove();
});
});
#media only screen and (max-width: 640px) {
/* Force table to not be like tables anymore */
.no-more-tables table,
.no-more-tables thead,
.no-more-tables tbody,
.no-more-tables th,
.no-more-tables td,
.no-more-tables tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
.no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.hdv {
width: 46%;
padding: 5px;
display: inline-block;
}
.dsp {
font-weight: bold;
}
.no-more-tables tr {
border: 1px solid #ccc;
}
.no-more-tables td {
/* Behave like a "row" */
width: 100%;
border: none;
border-bottom: 1px solid #eee;
white-space: normal;
text-align: left;
}
/*
Label the data
*/
}
.cf {
width: 100%;
}
.cf > tr > th {
text-align: left;
}
.cf > tbody > tr > td {
height: 25px;
}
.newvariation > td > input:focus {
outline: 0px !important;
-webkit-appearance: none;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
.vv > div {
margin: 5px;
display: inline-block;
cursor: pointer;
}
#media only screen and (min-width: 641px) {
.dsp {
visibility: hidden;
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="no-more-tables">
<table class="table-bordered table-striped table-condensed cf">
<thead class="cf">
<tr>
<th class="c1">
<input type="checkbox" class="checkAll" />
</th>
<th class="c2">Product</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="selectall" />
</td>
<td>
<span class="hdv dsp">Product</span>
<span class="hdv" contenteditable="true">iPhone 7 Plus</span>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<div class="vv">
<div class="ww">+ Add new Line</div>
<div class="gone">- Remove selected</div>
</div>

Cannot properly format nested table with CSS

Please look at this JSFiddle as reference.
Using tablesort and the accompanying css, I am trying to get the rows with first/last name to have alternating row colors. Also, I need the rows in the sub-table with date and time to have a white background.
I think part of my problem is that I also have a different class on the first td under the tablesort table. I need that class to kick off the trigger to toggle the hidden row... I just can't seem to get the CSS right.
Here is my HTML
<table class="tablesorter" id="table1">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
</tr>
</thead>
<tbody>
<tr class="parent-row">
<td>John</td>
<td>Appleseed</td>
</tr>
<tr class="parent-row-details expand-child" style="display:none">
<td colspan="6">
<table class="sub-table" id="SPID" border=1>
<thead>
<th>Date</th>
<th>Time</th>
</thead>
<tbody>
<tr>
<td>12/1/13</td>
<td>4:00AM</td>
</tr>
<tr>
<td>12/1/14</td>
<td>7:00AM</td>
</tr>
<tr>
<td>12/1/15</td>
<td>6:00AM</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="parent-row">
<td>David</td>
<td>Goliath</td>
</tr>
<tr class="parent-row-details expand-child" style="display:none">
<td colspan="6">Detail about David</td>
</tr>
<tr class="parent-row">
<td>Amie</td>
<td>Winehouse</td>
</tr>
<tr class="parent-row-details expand-child" style="display:none">
<td colspan="6">Detail About Amie</td>
</tr>
</tbody>
And Here is the CSS
table.tablesorter {
font-family:arial;
background-color: #CDCDCD;
margin:10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #e6EEEE;
border: 1px solid #FFF;
font-size: 8pt;
padding: 4px;
}
table.tablesorter thead tr .header {
background: url(http://tablesorter.com/themes/blue/bg.gif) no-repeat 99%;
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
color: #3D3D3D;
padding: 4px;
background-color: #FFF;
vertical-align: top;
}
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
background: url(http://tablesorter.com/themes/blue/desc.gif) no-repeat 99%;
}
table.tablesorter thead tr .headerSortDown {
background: url(http://tablesorter.com/themes/blue/asc.gif) no-repeat 99%;
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}
table.tablesorter tr.parent-row td {
background: #8dccc8;
}
table.tablesorter tr.parent-row-details td {
background: grey;
}
table.sub-table thead tr th {
background-color: #FFF;
border: 1px solid #000;
font-size: 8pt;
padding: 4px;
}
table.sub-table tbody tr td {
background-color: green;
border: 1px solid #000;
font-size: 8pt;
padding: 4px;
}

is this something like you wanted?
http://jsfiddle.net/johnboker/q7VL3/116/
added > td
$(document).ready(function () {
$("table.tablesorter tr.parent-row:even > td").css("background-color", "blue");
});
also changed
table.sub-table tbody tr td {
background-color: white; /* made this white */
border: 1px solid #000;
font-size: 8pt;
padding: 4px;
}

Categories