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>
Related
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
}
I have a small formatting issue. It can be because I don't fully understand the data tables formatting.
HTML code
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
<h1 class="page-header">Test Runs</h1>
<div class="table-responsive">
<table class="table table-striped" id="tests">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Link</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
</tr>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
</tr>
</tbody>
</table>
</div>
The outer div is present because i have a side menu bar which is not shown here.
JS code
$(document).ready(function() {
$('#tests').DataTable( {
dom:
"<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-3'i><'col-sm-6 text-center'B><'col-sm-3'p>>"
} );
} );
In the above js code, if I don't add "dom" element the filter results and search bar are not in the same row , they are one below the other.
The same applies to information and pagination.
I want the four elements to be in four corners of the screen.
eg:
length changing input control : top left
filtering input : top right
table information summary : bottom left
pagination control : bottom right.
With the current code (with the "dom" added) I am able to achieve this but now there is a horizontal scroll which I don't want.
Can someone tell me what mistake I made.
You can place the relevant elements in the bootstrap panel.
$(document).ready(function() {
var table = $('#example').DataTable({
"dom": '<"panel panel-default"<"panel-heading"<"row"<"col-md-6"l><"col-md-6 text-right"f>>>t<"panel-footer"<"row"<"col-md-6"i><"col-md-6 text-right"p>>>>'
}); });
Demo : http://jsfiddle.net/a62hqqf9/
You can also look again for the use of DOM elements : datatable dom
The main reason for horizontal scroll is negative margins of .row. You need to remove negative margins with custom class. I have added .no-gutters in the snippet example as you are probably using Bootstrap 3. If you are using Bootstrap 4, the class comes with Bootstrap CSS.
Demo: Working example
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've made a table with a fixed header that stops when it reaches the bottom of my table. which i put into a div with overflow: hidden;. I kind of got everything to work, but not 100% to my liking.
<div class="container">
<table class="tableWithFloatingHeader">
<thead>
<tr>
<th>table1 col header</th>
<th>table1 col header</th>
</tr>
<tr>
<th>table1 col header2</th>
<th>table1 col header2</th>
</tr>
</thead>
<tbody>
.............
</tbody>
</table>
</div>
problem is:
i can't seem to get everything in the <thead> to scroll down too.
only the 1st row does (the first <tr>).
ONLY the <th> visible in the div should be seen when
scrolling down.
How do i position my controllers right beside the div? On a bigger
monitor, it's position is way off (because of this 'left': '20px')
here is a link to my JSFIDDLE
and here is my html for my controllers
<div id="compare-table-controller">
‹
›
</div>
Demo
Changed width: 700px to width: 100% You can change left value like width value (percentage value)
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?