What is the best way to make the contents of my table scroll while keeping the table structure fixed?

I am looking for a way to scroll the contents of my table horizontally while keeping the table structure fixed. Currently, when I try to scroll, the table structure scrolls along with the content, resulting in visibility issues at both ends due to the corner radius. I want the background structure to remain fixed while only the content scrolls horizontally. The desired output can be seen in the image linked below.
https://i.sstatic.net/OoW70.jpg

table {
width: 120%;
}

td {
padding-top: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #f5f5f5;
padding-left: 20px;
}

.scrollsec {
overflow-x: scroll;
}

th {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 20px;
}

th:nth-child(1) {
border-radius: 11px 0px 0px 9px;
}

th:nth-last-child(1) {
border-radius: 0px 11px 9px 0px;
}

.bodySec {
background: #fff;
border-radius: 10px;
}

.he20 {
height: 20px;
}

.bodySec tr:nth-child(1) td:nth-child(1) {
border-radius: 11px 0px 0px 0px;
}

.bodySec tr:nth-child(1) td:nth-last-child(1) {
border-radius: 0px 9px 0px 0px;
}

.bodySec tr:nth-last-child(1) td:nth-last-child(1) {
border-radius: 0px 0px 11px 0px;
}

.bodySec tr:nth-last-child(1) td:nth-child(1) {
border-radius: 0px 0px 0px 11px;
}

.scrollsec::-webkit-scrollbar-thumb {
height: 10px;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
<div class="col-md-12 col-sm-12 col-xs-12  scrollsec">
<table>
<thead class='tableHeadSec'>
<tr>
<th>Transaction Id</th>
<th>Transaction Id</th>
<th>Transaction Id</th>
<th>Transaction Id</th>
<th>Transaction Id</th>
<th>Transaction Id</th>
<th>Transaction Id</th>
</tr>

</thead>
<tr class='he20'></tr>
<tbody class='bodySec'>
<tr>
<td>Transaction Id</td>
<td>Transaction Id</td>
<td>Transaction Id</td>
<td>Transaction Id</td>
<td>Transaction Id</td>
<td>Transaction Id</td>
<td>Transaction Id</td>
</tr>
<tr>
<td>Transaction Id</td>
<td>Transaction Id</td>
<td>Transaction Id</td>
<td>Transaction Id</td>
<td>Transaction Id</td>
<td>Transaction Id</td>
<td>Transaction Id</td>

</tr>
<tr>
<td>Transaction Id</td>
<td>Transaction Id</td>
<td>Transaction Id</td>
<td>Transaction Id</td>
<td>Transaction Id</td>
<td>Transaction Id</td>
<td>Transaction Id</td>

</tr>
<tr>
<td>Transaction Id</td>
<td>Transaction Id</td>
<td>Transaction Id</td>
<td>Transaction Id</td>
<td>Transaction Id</td>
<td>Transaction Id</td>
<td>Transaction Id</td>

</tr>
<tr>
<td>Transaction Id</td>
<td>Transaction Id</td>
<td>Transaction Id</td>
<td>Transaction Id</td>
<td>Transaction Id</td>
<td>Transaction Id</td>
<td>Transaction Id</td>

</tr>
</tbody>
</table>


</div>

javascriptjqueryhtmlcsshtml-table

Answer №1

Feel free to take a look at this solution:

https://codepen.io/Khadembd/pen/GRKOaVj

body{
  font-family:arial;
}

table{
  border-collapse:collapse;
  width:900px;
}

thead tr th, tbody tr td{
  text-align:left;
  padding:10px 15px;
  width:300px;
}

thead tr th{
  background-color:#333;
  color:#fff;
}

.tbody{
  display: block;
  height:200px;
  overflow-y:auto;
}

tbody tr td{
  border-bottom:1px solid #ccc;
}
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Phone Number</th>
    </tr>
  </thead>
</table>
<table class="tbody">
  <tbody>
    <tr>
     <!--Add your table rows here-->
   </tbody>
</table>

Answer №2

table {
  width: 100%;
}

table, td {
  border-collapse: collapse;
  border: 1px solid #000;
}

thead {
  display: table; 
  width: calc(100% - 15px); 
}

tbody {
  display: block;
  max-height: 200px; 
  overflow-y: scroll;
}

th, td {
   
  padding: 5px;
  word-break: break-all; 
}

tr {
  display: table; 
  width: 100%;
  box-sizing: border-box; 
}

td {
  text-align: center;
  border-bottom: none;
  border-left: none;
}
 <table>
    <thead>
      <tr>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
      </tr>

    </thead>
   
    <tbody >
      <tr>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
      </tr>
      <tr>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>

      </tr>
      <tr>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>

      </tr>
      <tr>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>

      </tr>
      <tr>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>

      </tr>
    </tbody>
  </table>

css: 

  table {
      width: 100%;
    }

    table, td {
      border-collapse: collapse;
      border: 1px solid #000;
    }

    thead {
      display: table; 
      width: calc(100% - 15px); 
    }
    
    /* More CSS styles included for better formatting */

Html:

<table>
    <thead>
      <tr>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
      </tr>

    </thead>
    
    <!-- More HTML elements added here -->

  </table>

I hope this example data is helpful for you in understanding the structure.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Efficient Django Template: Accurate Conversion of Values through Dictionary Searching

I have an object with an attribute that has specific choices defined in its class: class StashURLJobRequest(models.Model): STATUS_CHOICES = ((0,"Requested"),(1,"Done"),(2,"Failed")) url = models.URLField() created = models.DateTimeField(auto_n ...

pythoncssdjango

The test() function in JavaScript alters the output value

I created a simple form validation, and I encountered an issue where the test() method returns true when called initially and false upon subsequent calls without changing the input value. This pattern repeats with alternating true and false results. The H ...

javascriptjquerytypescript

The concatenation function in JavaScript does not seem to be functioning properly with JSON

My attempt to use .concat() in order to combine two objects is resulting in tiles.concat is not a function The following code (in an angular app and written in coffeescript): $scope.tiles = new UI(); $scope.tiles.loadUITiles(); console.log($sco ...

javascriptangularjsjsoncoffeescript

Having trouble with Grunt and Autoprefixer integration not functioning properly

Joining a non-profit open source project, I wanted to contribute by helping out, but I'm struggling with Grunt configuration. Despite my research, I can't seem to figure out why it's not working. I am trying to integrate a plugin that allow ...

javascriptnode.jsgruntjspostcssautoprefixer

Comparing JavaScript dependency management tools: npm, bower, and volo

When considering npm, bower, and volo, how do they stack up against each other? All three serve the purpose of installing JavaScript dependencies for a UI project. It's known that npm is more tailored towards node applications. So, in what scenarios ...

javascriptnode.jsnpmbowervolojs

An unknown browserLink expression was encountered

I encountered an issue with " browserLink " that you can see below <div ng-show="optList.editing && optList.BANKRUPT_FLG != 'Y' && (optList.OPT != 'TF' || (optList.OPT == 'TF' && optLi ...

jqueryhtmlangularjsvisual-studiobrowser-link

Keeping Ajax active while the PHP script is running is essential

Seeking assistance with a specific issue. I currently have an ajax script (index.php) that sends variables to a php file (thumbs.php). The php file generates thumbnail images from original files and saves them on the server. This process can sometime ...

jqueryajaxloopssettimeoutcleartimeout

What is the best way to organize my comments, responses, and replies in an efficient manner?

I am currently working with Nodejs, Express, MySQL, and EJS. In my project, users can create posts and leave comments. They can also reply to comments or replies on those posts. However, I am facing a challenge in sorting the data into objects/arrays for ...

javascriptmysqlnode.jsexpressejs

Substitute a unique section of a JSON data``

I am working with a JSON object named users, which looks like this: [{"givenName":"helen","sn":"brown","phone":"44512","details":"512"},{{"givenName":"John" ...

javascriptjson

Beautiful prompt interface for HTML

I'm attempting to create a sweet alert using the HTML option: swal({ title: "HTML <small>Title</small>!", text: "A custom <span style="color:#F8BB86">html<span> message.", html: true }); Instead of just text, ...

javascripthtmlcsssweetalert

Using jQuery to dynamically retrieve a radio button

After struggling with this issue for quite some time, I have come to the realization that it's too complex for me to handle on my own. I could really use some assistance here. The problem at hand involves a page displaying various products, each of w ...

javascriptjqueryradio-button

What's the best way to showcase information from a document on the screen?

Every time I visit the '/gallery' route, the data from the 'posts.json' file is retrieved. By utilizing the 'fs' module and the read() method, the data is read from the file and stored in the this.pictures array. However, upon ...

javascriptnode.jsexpressecmascript-6routes

How to Delete the Bottom Border on Selected Tabs in MUI Using React

I am attempting to customize the appearance of MUI Tabs to achieve a design similar to the image below: https://i.sstatic.net/tBS1K.png I have created a sample code example in a codesandbox environment. You can view it here: Codesandbox Example. In this e ...

htmlcssreactjsmaterial-uitabs

Why does refreshing a page in AngularJS cause $rootScope values to disappear?

On my local route http://localhost:9000/#/deviceDetail/, there is a controller that handles the view. Before navigating to this view, I set certain variables on the $rootScope (such as $rootScope.dashboards). While on the view, I have access to the dashbo ...

javascriptangularjscookieslocal-storage

Is there a way to continually repeat a hover effect?

Currently, I am focusing on creating a timeline and have managed to get the basic function working in jQuery. You can view my progress on jsFiddle here: http://jsfiddle.net/Jason1975/6nwkd2c8/38/ The issue I am facing is that I cannot get the hover effect ...

jqueryhtml

Unlocking the Power of ReactJS: Passing Values in Material UI for Advanced JSON Structures

How can I access complex objects in the GRID component of material UI? Specifically, I am trying to access the ami_info.account, but it only displays Undefined in the UI. var columns = [ { field: 'id', headerName: 'ID', width: 90, ...

javascriptreactjsmaterial-ui

What is the process for executing code on a server by clicking a button?

In my Next.js application, there is a file named dummy.js with the following content: class Dummy extends React.Component{ static async getInitialProps(ctx){ return { dummy : 'abc'}; } displayHelloWorld(params) { cons ...

javascriptreactjsnext.js

Data input via $_POST method during the submission of a web application is failing to

Having trouble with the login functionality in an EllisLab application framework. The data from the $_POST method is not being stored upon form submission, resulting in an error message. When using var_dump($POST), it shows array(0){}. View Error Screensh ...

javascriptphpjqueryhtmlforms

How can I invoke the Apify Google Search Scraper Task through JQuery/Ajax?

I'm currently in the process of familiarizing myself with apify/google-search-scraper by utilizing their API call. You can find the documentation provided here. As a newcomer, I must admit that I find their documentation a bit confusing. Specifically ...

jqueryajaxapify

Potential risk of memory leakage when utilizing the CanvasRenderer

I've encountered a memory leak problem within my application. After some investigation, I've been able to simplify the issue into a test case found here: http://jsfiddle.net/729sv/ It seems that adding and removing geometry from a scene is causi ...

javascriptthree.js