I have some page content in a React web app where certain fields should remain fixed as the user scrolls. The part that's throwing me off is this content is contained within a scrollable outer div. That outer div must remain scrollable because it occasionally loads different components that need it.
Here is the div structure:
<div class="inner"><!-- overflow-y: auto; (this must remain)-->
<div class="wrapper">
<div class="titleBar"> <!-- I need this to not scroll -->
<div class="mainTable">
<table>
<th>...</th> <!-- I need this to not scroll -->
<tbody>
...
</tbody>
</table>
</div>
</div>
</div>
</div>
So as the user scrolls down the page, the title bar and table header should remain fixed, with the table body content being the only thing on the page that is scrolling. I'm not able to just make the table body scrollable because that will put a scrollbar on the table itself, it needs to scroll on the actual page scroll.
Most posts on this I've been able to find are using JQuery, but since this is within ReactJS I'm looking for other solutions.
Correct table head structure is:
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
</table>
Then try customize thead th css as following:
thead th {
position:sticky;
top: 0
}
Related
I have a problem with centering a button after I set it to display: block.
I've got a table:
<table border="0" id="contacts" width="100%">
<tr><td><div align="center"><button style="width:200px;">btn1</button></div></td></tr>
<tr><td><div align="center"><button style="width:200px;">btn1</button></div></td></tr>
</table>
Both buttons are centered in the table. Now I switch the visibility with:
document.getElementById("contacts").style.display = "none";
The table and buttons are invisible. After I switch the visibility back with:
document.getElementById("contacts").style.display = "block";
The buttons are aligned to the left. How can I center the buttons again?
First, do not use a table structure for formatting. Tables have their place, but using them as HTML scaffolding is so 1990. Instead, use DIVs with css.
Break your page up into several outer boxes, or containers. (For this, you can use DIVs - you can use DIVs for just about all containers - or sections or other container elements depending on your need for extra SEO cred.)
Within each outer container (div), you then subdivide into the type of layout you need (again, using divs). Then, within each sub-area, again use divs (or other container element) to do any further sub-divisions.
So, how to size / position all these things? Use CSS.
In css, there is a reason why the most important change from Bootstrap3 to Bootstrap4 is moving from floats to flexbox. Floats was the old way to position items; flexbox (and CSSGrid) are the new way. Flexbox is dead easy.
Flexbox requires two things:
A parent container (e.g. DIV, section, aside, p, etc)
One or more child elements (e.g. div, p, img, etc)
Here is an excellent 5min video tutorial
Here is a great cheatsheet
You would use document.getElementById("contacts").style.display = "table";
You could also give it a class "align-content-center" in this example
<table border="0" id="contacts" width="100%">
<tr>
<td>
<div class="align-content-center">
<button style="width:200px;">btn1</button>
</div>
</td>
</tr>
<tr>
<td>
<div class="align-content-center">
<button style="width:200px;">btn1</button>
</div>
</td>
</tr>
</table>
and then just style your div around the buttons
.align-content-center{
width: 100%;
text-align: center;
}
I am trying to use this tutorial to allow efficient scrolling on a matrix widget I wrote. However, it uses absolute positioning on the infinite scrolling nodes it creates. My nodes are table rows and columns. That takes all of the cells out of table flow. Is there a way, to keep absolutely positioned table cells in flow?
I do know it is possible to absolutely position a div and keep it in flow with another div wrapped around it using relative positioning on the outer div. Something like:
<div style="position:relative"><div style="position:absolute;top:0;left:0"></div></div>
However, that will not work in this case due to the outer html being a table body with a header and the inner html being table rows. Is there any way to apply relative positioning to a part of a table to force absolutely positioned table cells to stay within the table and keep their alignment with the table header?
I have tried applying relative positioning on various parts of the table surrounding the absolutely positioned rows like:
<table border="1">
<thead><tr><th>header</th><th>another header</th></tr></thead>
<tbody style="position:relative">
<tr style="position:absolute">
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr style="position:absolute">
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
</tbody>
</table>
Is it possible to modify the above snippet so the cells stay in flow with the thead section and the rest of the table? The same relative positioning trick that works for divs, does not seem to work for table content.
I think clusterize.js may offer you a solution to your problem, as it handles tables very well.
I think this is what you want. (If you are using Polymer's infinite iron-list)
<style>
:host {
display: block
}
#scrollzone {
display:flex;
flex-direction:column;
overflow-y:scroll;
}
.header {
background-color:red;
height:22px;
width:100%;
position:sticky;
top:0;
}
.footer {
background-color:blue;
height:22px;
width:100%;
position:sticky;
bottom:0;
}
iron-list {
flex: 1 1 auto;
}
</style>
<div id="scrollzone">
<div class="header">header</div>
<iron-list items="{{items}}" scroll-target="scrollzone">
<template>
<div>{{item.name}}</div>
</template>
</iron-list>
<div class="footer">footer</div>
</div>
Is it possible ..if table width increase then its main container widths increase according to that. Is it possible ??
<div class="container main-con">
<table class="table table-hover"> <tr><td></td></tr>
</table>
</div>
here if data increase in table then table is coming outside the container. so is it possible to increase width of main container according to table width
Having a container that is wider than the screen is almost always a very bad user experience. People (with good reason) don't like to scroll left and right. Instead you are better off making only your table scroll left/right.
You should be able to achieve this quite easily by making the table responsive. from the Bootstrap docs:
Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally
For example:
<div class="table-responsive">
<table class="table table-hover">
<tr>
<td></td>
</tr>
</table>
</div>
I am trying to adjust a Jquery sort-able, searchable table set up by seanmacisaac
Ref: http://www.seanjmacisaac.com/projects/code/tablesort/#index-member-4
How do I set the tbody height to a fixed value. Also allowing vertical scroll (overflow-y)?
<table class="table-sort table-sort-search table-sort-show-search-count">
<thead>
<tr><th class="table-sort">head1</th><th class="table-sort">head2</th><th class="table-sort">head3</th></tr>
</thead>
<tbody>
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
<tr><td>4-1</td><td>4-2</td><td>4-3</td></tr>
</tbody>
</table>
Just wrap the table into a div :
<div style="overflow:auto;height:500px;width:100%">
<table></table> // with any number of row
</div>
Put the css into a class and add a class to the container div
If you want to scroll only the data section of the table not with headers then you should make html like:
<div class="header-table" style="width:100%">
<table class="header"></table>
</div>
<div class="table-data" style="overflow:auto;height:500px;width:100%">
<table class="data"></table>
</div>
If you want to keep the header fixed while scrolling, for simple tables, I create a two separate tables:
the first for the header and the second in a div with fixed height and overflow-y:auto, just for the tbody.
Not that elegant but just do the job.
Don't know where this table will be but I think you should use a paginator for 100+ rows tables...
If the problem is sorting data and paginate I'd give jqGrid a chance: http://trirand.com/blog/jqgrid/jqgrid.html
i had an table like this
<div style="overflow:auto">
<table>
<thead><tr style="position:fixed"><th></th></tr></thead>
</table>
</div>
Now my problem is when i scroll div the header(that is tr element) is fixed it works fine but when i scroll the scrollbar of window the header tr is not fixed inside the div. I moves along the scroll bar of the window... Can any one help me to find out the solution please
I don't know If I'm getting your question right, but you may find this helpful http://fixedheadertable.com/
Sorry, I tried to do it in CSS alone, but that didn't work out, so you do need a bit of Javascript.
<div style="overflow:auto; position:relative;"
onscroll="document.getElementById('fixedtr').style.top = this.scrollTop+'px';">
<table>
<thead>
<tr style="position:absolute; top:0; left:0" id="fixedtr">
<th>Table header</th>
</tr>
</thead>
See jsFiddle.
This is how you want it, right?