I need to make table header sticky to div fot, but still having the table x-scrollable, if it gets wider than the screen. I tried a lot of CSS combinations, but no success.
<body>
<div id="fot">
<form id="frmSearch_1" method="post">
<div id="tableDiv" style="overflow-x:auto;">
<table id="printGT" style="overflow-x:auto;width:100%;">
<thead>
<tr id="printGT_head">
<th scope="col">Nr.</th>
<th scope="col">Nr.</th>
<th scope="col">Nr.</th>
<th scope="col">Nr.</th>
</tr>
</thead>
<tbody>
<tr class="table-row">
<td>Nr</td>
<td>112</td>
<td>202a</td>
<td>asd</td>
</tr>
</tbody>
</table>
</div>
</form>
<span>LOT OF OTHER LONG CONTENT</span>
</div>
</body>
Related
I am attempting to create a section at the top of a web page that will show 2 status tables side by side. I have this setup, but am unable to get one element working - adding a vertical scroll to the right-hand table.
I want the tables to occupy at most 25% of the viewport height and have a vertical scroll on the right table when the data would exceed that size (the left hand table data should remain small). The reason for this is that there will be other items added to the page underneath the table.
I am able to get a vertical scroll to work if I manually set the table to a certain pixel height, but this is not desired as I want it to be responsive to the screen size.
My page is using Bootstrap 5 and jQuery 3.6.
Here is an example of an attempt, you can also use this fiddle
HTML
<div class="page-body">
<div class="container-fluid h-25">
<div class="row justify-content-around h-25">
<div class="col">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th colspan="2" style="text-align:center">System Status</th>
</tr>
<tr>
<th>Active Jobs</th>
<th>Queued Jobs</th>
</tr>
</thead>
<tbody>
<td></td>
<td></td>
</tbody>
</table>
</div>
<div class="col overflow-scroll">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th colspan="3" style="text-align:center">Recently Executed Tasks</th>
</tr>
<tr>
<th>Job</th>
<th>Task</th>
<th>Start Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>Job B</td>
<td>Task X</td>
<td>06.06.2022 15:31:17</td>
</tr>
...many more rows...
<tr>
<td>Job B</td>
<td>Task X</td>
<td>06.06.2022 15:31:17</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
CSS
.page-body {
width:100vw;
height:100vh;
}
Instead of keeping to 25% of the view as I desire, the table expands to fill the entire page.
Any tips for how to fix this?
In order to perform the scrollable in a vertical position, you have to make sure that your parent element has a fixed height using CSS: e.g.: style="height:200px;" And your HTML code just looks like this.
<div class="page-body">
<div class="container-fluid h-25">
<div class="row">
<div class="col-md-6 overflow-scroll" style="height:200px;">
<table class="table table-bordered table-hover">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="col-md-6 overflow-scroll" style="height:200px;">
<table class="table table-bordered table-hover">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
I hope this will help you. If you just want to get more advance in Web development, please kindly check out my Web Programming Course
Thanks
Here I want horizontal scroll for table with id "datavaulttable" I have tried with overflow-x and display:block property but it is not working, while specifying overflow-x property I also set width property like width:200px still it not working.
<body style="overflow-y: scroll; height: 100px">
<div>
<table id="tbluserfolder">
<tr>
<td>
<button id="addbutton" class="btn"
style="background-color: lightgray" onclick="folderInfo()">
<img src="/BoardUI/img/plussign.jpg" height="50px" width="50px" />
Add Folder
</button>
</td>
</tr>
</table>
<table class="foldertable table-bordered" id="datavaulttable" >
<!--
table-striped
<thead>
<tr>
<th>File</th>
<th>Created On</th>
<th>Created By</th>
</tr>
</thead> -->
</table>
<table class="table table-striped table-bordered" id="fileinfo">
<thead>
<tr>
<th>File</th>
<th>Created On</th>
<th>Created By</th>
</tr>
</thead>
</table>
</div>
</body>
i just added div tag , wrapped table with div
<div style="overflow-x: scroll; width: 99%">
<table class="table table-bordered" id="datavaulttable">
<!--
table-striped
<thead>
<tr>
<th>File</th>
<th>Created On</th>
<th>Created By</th>
</tr>
</thead> -->
</table>
</div>
If you are using bootstrap the by adding class
table-responsive
https://jsfiddle.net/fb7xLmx2/
overflow-x:scroll is working
<div class="scrollmenu">
Your table code comes inside that div with class scroll menu.
I need to set a link on a picture. I have to set it up in tables, which I did. But I cannot understand why the picture is linking in full width. That means the background color is also a link. That link should only be on the picture.
If it was a div tag it could be solved with a wrapper, but I do not know how to solve that within tables?
My Example
This is my code:
<body>
<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner">
<!-- Row 1 -->
<table class="row collapse" >
<tbody>
<tr>
<th class="small-12 large-12 columns first">
<table>
<tr>
<th>
<img src="http://3.bp.blogspot.com/-Z4vZ7AsD6Bc/T_PNRK_9f2I/AAAAAAAAAH4/t3UZ3BQyqdE/s1600/shutterstock.jpg" alt="test" align="center" class="float-center" >
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<!-- Row 2 -->
<table class="row collapse bgcolor--blue">
<tbody>
<tr>
<th class="small-12 large-12 columns">
<table>
<tr>
<th>
<img src="http://24.media.tumblr.com/7a40daf7853d830815fb83f79752e94a/tumblr_mz2izkaidT1rfn9zxo4_500.png" alt="Fashion news" align="center" class="float-center">
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
I didn't notice this should happen. Try this CSS :
th {
text-align: center;
}
th a {
display: inline-block;
}
edit using #SpencerMay comment
I cant seem to get this right, i made a divider through css divs and it shows on page but when in print the lines i made doesnt show..what other options should i do? im running out of ideas, what am i doing wrong how can i achieve this
here is what i want ot achieve
heres my css
heres the print preview
page code:
<div id="page-wrapper">
<div class="row">
<div class="col-md-12">
<div class="panel-body">
<p style="text-align:center;"><b>PROPERTY ACKNOWLEDGEMENT RECEIPT</b></p>
<p style="text-align:right;">Control No.</p>
<div class="row">
<div class="col-md-16">
<table class="table table-hover table-striped table-bordered table-condensed" class="">
<thead>
<tr>
<th style="text-align:center;">Quantity</th>
<th style="text-align:center;">Unit</th>
<th style="text-align:center;">Description</th>
<th style="text-align:center;">Unit Value</th>
<th style="text-align:center;">Property No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
<td>bucket</td>
<td style="font-size:12px;">oremloremloremloremloremloremloremloremloremlorem</td>
<td>2</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<hr style="background-color:black;"> NOTE:
<div style="height:2px;width:100%;background-color:black;"></div>
<div style="width:2px;height:100px;background-color:black;margin:0px auto;"></div>
</div>
</div>
</div>
$(document).ready(function() {
$('#dataTables-example').DataTable({
responsive: true
});
});
I using this with bootstrap. Tables display fine but theres something wrong with the width of the thead and tbody rows, you can see they have a smaller width than the entire column.
IF you click the panel head you'll see the line temporarily being the correct size. How do I fix this.
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading" data-toggle="collapse" href="#collapse1">Shop 1</div>
<!-- Table -->
<table class="table collapse" id="collapse1">
<thead>
<tr>
<th>Number</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>this is a shop</td>
<td>Go to</td>
</tr>
</tbody>
</table>
</div>
Well your problem is that the no. of columns i.e. <th></th> elements in table head <thead> doesn't match the no. of columns in table body <tbody>.
So you need to put an extra <th></th> inside table head <thead> which could be blank like this -
Your code Fiddle
Updated Working Fiddle with code below -
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading" data-toggle="collapse" href="#collapse1">Shop 1</div>
<!-- Table -->
<table class="table collapse" id="collapse1">
<thead>
<tr>
<th>Number</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>this is a shop</td>
<td>Go to</td>
</tr>
</tbody>
</table>
</div>