I followed #koala_dev's code in this post to try to lock the first column s my table scrolls horizontally. The code unfortunately has no effect on my table. I was wondering if anyone could give me some pointers on what I have done wrong as I am new to programming.
This is my table:
http://jsfiddle.net/mademoiselletse/bypbqboe/59/
This is the code I inserted in JS (line 121-133):
$(function() {
var $tableClass = $('.table');
// Make a clone of our table
var $fixedColumn = $tableClass.clone().insertBefore($tableClass).addClass('fixed-column');
// Remove everything except for first column
$fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();
// Match the height of the rows to that of the original table's
$fixedColumn.find('tr').each(function(i, elem) {
$(this).height($tableClass.find('tr:eq(' + i + ')').height());
});
});
This is the CSS properties (line 36-47) I have inserted:
.table-responsive > .fixed-column {
position: absolute;
display: inline-block;
width: auto;
border-right: 1px solid #ddd;
}
#media(min-width:768px) {
.table-responsive>.fixed-column {
display: none;
}
}
The only thing I deviated from the demo code was that I defined $('.table') as $tableClass instead of $table since I have previously defined var $table as $('#table') . Your help will be much appreciated!
Just add position:sticky to th & td first-child.
th:first-child, td:first-child
{
position:sticky;
left:0px;
background-color:grey;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
<tr>
<th>TIME</th>
<th>Company</th>
<th>Company</th>
<th>Company</th>
<th>Company</th>
<th>Company</th>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>11:40 </td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>11:40 </td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>11:40 </td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>11:40 </td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>11:40 </td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>11:40 </td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
Ok.. Remove all your js code and you can do this with some CSS tricks as below:
DEMO
CSS
.table > thead:first-child > tr:first-child > th:first-child {
position: absolute;
display: inline-block;
background-color: red;
height: 100%;
}
.table > tbody > tr > td:first-child {
position: absolute;
display: inline-block;
background-color: red;
height: 100%;
}
.table > thead:first-child > tr:first-child > th:nth-child(2) {
padding-left: 40px;
}
.table > tbody > tr > td:nth-child(2) {
padding-left: 50px !important;
}
The following style will create a stripped table with the first column fixed:
th:first-child, td:first-child{
position: sticky;
left: 0px;
z-index: 1;
}
tr:nth-child(odd) > td{
background-color: #ededed;
}
tr:nth-child(even) > td{
background-color: #e2e2e2;
}
tr:nth-child(odd) > th{
background-color: #d7d7d7;
}
$('#table') means your finding element by id table.
$('.table') means your finding elements by class table.
These are the CSS selectors you used in css.
In your case, your table had id table so you can select that table using $('#table').
And you don't have any html elements using class table, so you'll get nothing when you select using $('.table').
Related
I am try to generate pdf using html in react-native-print. AS we all know in iOS page break is not working for html, there have some limitation for iOS but is there have any way to get a table header for each page and get footer for each page in pdf.
At the below i have share some example what i exactly want to do in pdf.
please help me if possible to do in html.
let me know anything can work for this,
thanks for your trying in advance!
const html1 = `
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#page{
size: A4 landscape;
margin-top:0px;
margin-bottom:0px;
margin-left:10px;
margin-right:10px;
}
.demo {
border:1px solid #C0C0C0;
border-collapse:collapse;
padding:5px;
page-break-inside:auto;
margin-buttom:300px;
table-layout:fixed;
}
.demo tr{
border:2px solid #C0C0C0;
padding:5px;
page-break-inside:avoid;
page-break-after:auto;
}
.demo th {
border:2px solid #C0C0C0;
padding:5px;
background:#F0F0F0;
font-size: 24px;
}
.demo td {
border:2px solid #C0C0C0;
text-align: center;
}
.images {
text-align: center;
}
body{
padding-top: 30px;
padding-bottom: 60px;
}
h2{
font-size: 22px;
}
.footers {
position: fixed;
bottom: 0;
width: 100%;
color: black;
z-index: 9999;
font-style: italic;
font-weight: bold;
text-align: center;
background-color: #ffffff;
}
pagging {
text-align: left;
counter-reset: page;
}
pagees::before{
counter-increment: page;
content: "Page " counter(page);
text-align:left;
}
#media print
{
thead {display: table-header-group;}
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<div class="footers">
Copyright © 2022
</div>
</body>
</html>`;
const printToFile = async () => {
// On iOS/android prints the given html. On web prints the HTML from the current page.
const { uri } = await Print.printToFileAsync({
html: html1,
//html: html2,
//useMarkupFormatter:true,
width: 612,height:496, margins: {
left: 20,
top: 50,
right: 20,
bottom: 100,
},
//base64: true,
});
console.log('File has been saved to:', uri);
await shareAsync(uri, { UTI: '.pdf', mimeType: 'application/pdf', encoding: Print.printToFileAsync.Base64 });
};
output and expected output:
This seems like a pretty basic fix, but I couldn't find anything. I want to be able to shrink a table so it fits its contents. In the picture below the table extends beyond its columns.
Here's what I have:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
max-width: 80%;
background-color: #f4f0ea;
margin: 20px;
}
td, th {
border: 1px solid lightgray;
text-align: left;
padding: 8px;
}
th {
background: #ababab;
position: sticky;
top: 0;
}
<table id='sample1'>
<caption>Sample table 1</caption>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
Within a table I need to 'pin' a column in place and have other other colums horizontally scrollable. Here is a visual example:
I tried using overflow scroll but it appears to do nothing:
.horizontal-scrolling {
display: flex;
width: 500px;
overflow: scroll;
}
.horizontal-scrolling th {
width: 250px;
}
<table>
<thead>
<tr>
<th>First</th>
<span class="horizontal-scrolling">
<th>Second</th>
<th>Third</th>
<th>Fourth</th>
</span>
</tr>
<thead>
</table>
I've modified the w3schools standart table, to where one column sticks to the left. this kind of styling can be applied to a specific column of your table by javascript
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 1000px;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
tr th:nth-of-type(1),/*this is where the table column gets its*/
tr td:nth-of-type(1){/*styling to stick to the left and stay ontop of the rest*/
position:sticky;
left: 0;
z-index: 1;
background: white;
width: 150px
}
div {
width: 600px;
overflow: auto;
}
<body>
<h2>HTML Table</h2>
<div>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</div>
</body>
Hello below you can see my table, however, it does not take the full width of the page, I believe it has something to do with my
<div style={{ overflow: 'auto', height: '250px' }}>
However, I need the table headers to stay within the page and not be allowed to be scrolled down with the table body
This solution works perfectly in chrome. This doesn't work in IE.Refer here for more solutions that work with Javascript and jQuery that works for IE
table thead tr th {
position: -webkit-sticky;
position: sticky;
background-color: white;
z-index: 100;
top:-1px;
}
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
table thead tr th {
background-color: white;
position: sticky;
z-index: 100;
top: -1px;
}
<table>
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</tbody>
</table>
This question already has answers here:
How to highlight a column in html table on click using js or jquery?
(4 answers)
Closed 5 years ago.
I managed to 'highlight' a cell (td-element) when clicked by the user.
I'd like however the whole column to be heightlighted and the cell itself slightly different.
I can't get the last part done (highlighting the whole column).
all help in this is appreciated.
The desired outcome would be something like below:
function handleBlur(event) {
event.target.contentEditable = false;
}
document.querySelector('body').addEventListener('click', function(event) {
if (event.target.tagName.toLowerCase() === 'td') {
event.target.contentEditable = true;
event.target.focus();
event.target.addEventListener("blur", handleBlur);
}
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 500px;
margin: 50px 0 0 50px;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
background-color: white;
}
table td[contentEditable=true]{
-webkit-box-shadow: inset 0px 0px 0px 200px rgba(186,210,225,0.51);
-moz-box-shadow: inset 0px 0px 0px 200px rgba(186,210,225,0.51);
box-shadow: inset 0px 0px 0px 200px rgba(186,210,225,0.51);
outline: 3px solid #086AA7;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus </td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari </td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
Nowadays you can do this easily without jQuery by using the native DOM apis.
Find the index of the selected cell in the children of it's parent (using cellIndex), then iterate the cols, and change the background of the relevant col in the colgroup:
function handleBlur(event) {
event.target.contentEditable = false;
}
var cols = document.querySelectorAll('col'); // find the cols and cache
document.querySelector('body').addEventListener('click', function(event) {
var t = event.target;
if (t.tagName.toLowerCase() !== 'td') {
return;
}
t.contentEditable = true;
t.focus();
t.addEventListener("blur", handleBlur);
var highlightIndex = t.cellIndex; // the index of the clicked item in the row
cols.forEach(function(col, index) { // iterate the cols
col.style.background = index === highlightIndex ? 'lightblue' : null; // set the background to the clicked col, remove from others
});
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 500px;
margin: 50px 0 0 50px;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
table td[contentEditable=true] {
box-shadow: inset 0px 0px 0px 200px rgba(186, 210, 225, 0.51);
outline: 3px solid #086AA7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<colgroup> <!-- add a colgroup with a col item for each column -->
<col>
<col>
<col>
</colgroup>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus </td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari </td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>