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>
Related
In my react component, I have an html table with some css properties. Everything works well presently but the content of the first row is not aligning with other two rows of the table. It goes ahead of other row contents. I was applying overflow hidden and other properties. Here is the link to my codesandbox of what i have
Codesandboxlink
App.js
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<table id="customers">
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td> <div>
bvgsbdhbhksbhsbuihbsn nbhbhsbdh, sbhsb shbdhb vbhbjhbsjnbjsnjs k njlnljnljnjnjnb njnjjnjnj
bvgsbdhbhksbhsbuihbsn nbhbhsbdh, sbhsb shbdhb vbhbjhbsjnbjsnjs k njlnljnljnjnjnb njnjjnjnj
bvgsbdhbhksbhsbuihbsn nbhbhsbdh, sbhsb shbdhb vbhbjhbsjnbjsnjs k njlnljnljnjnjnb njnjjnjnj
bvgsbdhbhksbhsbuihbsn nbhbhsbdh, sbhsb shbdhb vbhbjhbsjnbjsnjs k njlnljnljnjnjnb njnjjnjnj
bvgsbdhbhksbhsbuihbsn nbhbhsbdh, sbhsb shbdhb vbhbjhbsjnbjsnjs k njlnljnljnjnjnb njnjjnjnj
</div>
</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</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>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</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>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr>
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</tbody>
</table>
</div>
);
}
Style.css
#customers {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td,
#customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(odd) {
background-color: #f2f2f2;
/* height: 20px;
overflow-y: hidden; */
}
#customers tr:hover {
background-color: #ddd;
}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #04aa6d;
color: white;
}
tbody tr td {
max-width: 100px;
}
tbody tr td div {
height: 50px;
overflow: hidden;
-webkit-column-width: 150px;
column-width: 150px;
}
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>
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>
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').