I am currently working on a table and struggling to implement both vertical and horizontal scrolling. I have searched for solutions but haven't found one yet. Can someone please assist me in resolving this issue? Any examples or code snippets would be greatly appreciated.
Thank you
It may not be exactly what you're looking for, but one approach is to enclose the table within a wrapper element and apply a overflow: scroll style to the wrapper.
.wrapper {
height: 200px;
position: relative;
overflow-y: scroll;
}
table td {
border: 1px solid #000;
}
table thead th {
position: sticky;
top: 0;
background: #fff;
padding-bottom: 30px;
}
table tfoot td {
background: #fff;
border: none;
position: sticky;
bottom: 0;
padding-top: 30px;
}
<div class="wrapper">
<table>
<thead>
<tr>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
</tr>
</thead>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<!-- More table rows here -->
<tfoot>
<tr>
<td>foot</td>
<td>foot</td>
<td>foot</td>
<td>foot</td>
<td>foot</td>
<td>foot</td>
<td>foot</td>
<td>foot</td>
<td>foot</td>
</tr>
</tfoot>
</table>
</div>Edit 1: included thead & tfoot sections that are fixed in position.
Edit 2: introduced padding to thead & tfoot.
Edit 3: specified vertical scrolling only for the table.
I am trying to achieve a unique effect where a gradient appears on the text instead of the background of an image. An example I created can be found here: https://codepen.io/BenSagiStuff/pen/BaYKbNj body{ background: black; } img{ padding: 30px; ...
I have developed a function to extract the most popular articles from a website. This involves scraping two parts: one for the article image and another for the link and title of the article. I then combine these elements into separate objects containing ...
How can I display the selected checkbox's text inside the button? Currently, when I select something from the checkbox, it only shows the text "Multiple Selection ▼" <div class="dropdown show"> &l ...
I have come across a jQuery calendar with the capability to scroll through months, and I am interested in triggering an event each time the month changes so that I can assign event listeners to every td element within the table (with days represented by ...
On my cshtml page within an MVC4 web app, I have a basic video tag like this: <video src="media/pop.mp4" width="698" height="392" preload="none" controls autoplay> While testing locally on localhost in IE10, the video plays without any issues. How ...
I'm encountering an issue with Bootstrap 5 where certain icons are not displaying correctly. The bi-search icon shows up perfectly, but the bi-send icon is not being shown at all. I would usually include this in a code snippet, but it seems that featu ...
Can I set a value within an if statement, like this: if (a = jQuery("#user > .mask.fix > .a1").css('display') != 'none'){ b = a + 'hello'; //b=jQuery("#user > .mask.fix > .a1").css('display')+&apos ...
Ensuring that at least one radio button for each question in my quiz is checked before allowing a user to submit was achieved by using a for loop within an if statement. Below is the code snippet: HTML: <form name="quizform"> <div i ...
Instead of just adjusting the browser window size, I utilized Chrome's developer tools to make adjustments. I double-checked that the appropriate meta tags were included in the code: <meta name="viewport" content="width=device-width, initial-scal ...
I am currently utilizing the bootstrap-multiselect plugin created by davidstutz in conjunction with twitter bootstrap 3.3.0. My goal is to have a radio button selected when I click on the dropdown, however, this functionality does not seem to be working a ...
I have taken on the challenge of understanding AngularJS by creating a webapp. Within my Eclipse environment, I am working with 4 files: main.js, index.html, view1.js, and view2.html. Currently, I can get index.html to load when Tomcat is running. Embedd ...
<div class="main"> <a title="here" href="http://google.com">google.com</a> <a title="sss" href="www.sss.com">sss</a> <a title="sss" href="www.sss.com">sss</a> <a title="sss" href="www.sss.com"> ...
Currently working on a website using bootstrap 4 and running into some issues. Any assistance would be greatly appreciated. The site can be found at www.castawayministries.com/newsite/. I've tried various solutions from online resources but none seem ...
Recently, I integrated the amazing bootstrap-select Successfully imported bootstrap-select into my project with the following: <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstra ...
Hello, as I work on my website with multiple pages, I am looking to implement smooth scrolling on a specific page without using the html tag for the entire site. Below is the code snippet I am working with: {% if section.settings.display_product_detail_des ...
In my application, I am using ngRoute to load a template that includes a bootstrap modal dialog. The purpose of this modal is to prompt the user if they are sure about losing their changes when trying to leave the row they are currently editing in a table. ...
I am attempting to create a straightforward download link for a PDF file that users can upload and then have the option to download. I would like this download feature to appear either in a pop-up box or simply on the Chrome download bar. Despite trying v ...
I have a static image with various buttons like Main, F1, F2, etc. within it that need to be made clickable in order to call an API. I am looking for suggestions on how to achieve this scenario. Any assistance would be greatly appreciated.https://i.sstat ...
I am dealing with a situation where I have approximately 100 pages, all containing an <ul> tag, but the issue is that I need to enclose each list item within a <span> tag. Below is the code snippet I have tried: <ul style="list-style-type: ...
Check out this template that I'm using. I've copied all the contents for the bower_components and dist folders, and made sure to link and require everything properly. There are no 404 errors, only status code 200. Here is a snippet of my code: ...