Ways to incorporate horizontal scrolling into an HTML table

I am looking to incorporate a horizontal scroll feature into my HTML table. The table has a width of 100% and the first cell has a fixed width of 50px. There can be hundreds of columns in this table, so I want the first column with the fixed width to always be visible, while the other columns become horizontally scrollable. Additionally, I want the widths of all the columns to adjust based on the size of the text in the header.

 <table>
                  <thead>
                    <tr>
                      <th>xxx</th>
                      <th>xxx</th>
                      <th>xxx</th>
                      <th>xxx</th>
                      <th>xxx</th>
                      <th>xxx</th>
                      <th>xxx</th>
                      <th>xxx</th>
                      <th>xxx</th>
                      <th>xxx</th>
                      <th>xxx</th>
                      <th>xxx</th>
                      <th>xxx</th>
                      <th>xxx</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                    </tr>
                    <tr>
                     <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                    </tr>
                    <tr>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                    </tr>
                    <tr>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                    </tr>
                    <tr>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                    </tr>
                  </tbody>
                </table>
htmlcss

Answer №1

Encase in a container

.wrapper{
  width: 400px;
  overflow-x: scroll;
}

.wrapper table td, .wrapper table th{
  width: 100px;
}
<div class="wrapper">
<table>
  <thead>
    <tr>
      <th>xxx</th>
      <th>xxx</th>
      <th>xxx</th>
      <th>xxx</th>
      <th>xxx</th>
      <th>xxx</th>
      <th>xxx</th>
      <th>xxx</th>
      <th>xxx</th>
      <th>xxx</th>
      <th>xxx</th>
      <th>xxx</th>
      <th>xxx</th>
      <th>xxx</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
    </tr>
    <tr>
     <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
    </tr>
    <tr>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
    </tr>
    <tr>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
    </tr>
    <tr>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
    </tr>
  </tbody>
</table>
</div>

Answer №2

To ensure a scroll appears in the table, add this to the table class or id and specify a width that accommodates the cells:

overflow-y: auto;

If you want the scroll to be visible from the start, use this code:

overflow-y: scroll;

Here's an example:

<style>
 .scrolltable {
   width: 50px;
   overflow-y: scroll;
 }
</style>

<body>
<div class="scrolltable">
 <table>
  <tr>
   <th>Content1</th>
   <th>Content2</th>
   <th>Content3</th>
   <th>Content4</th>
  </tr>
  <tr>
   <td>Data1</td>
   <td>Data2</td>
   <th>Content3</th>
   <th>Content4</th>
   <th>Content5</th>
   <th>Content6</th>
  </tr>
 </table>
 </div>
</body>

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

Retrieve the image by its unique identifier while viewing a preview of the image before it is uploaded

Below is the script I am using to preview an image before it is uploaded. The HTML structure looks like this: <div> <img id="image" src="#"> </div> <input type="file" accept="image/gif, image/jpeg, image/png" onchange="readURL(th ...

javascriptjqueryhtmlimage

The iframe failed to load on the external server

I'm working on a website where the admin can upload PDF files that will be displayed on an HTML page. I'm using an iframe to achieve this, and it works perfectly fine on my local server. However, when I tried uploading it to the remote server, it ...

phphtmlcodeigniteriframe

What could be causing the error? And is there a way to successfully append the child div to the parent div?

Here is the error message that I am encountering: Uncaught TypeError: Cannot read property 'appendChild' of null at HTMLButtonElement.<anonymous> Error is located at app.js on line 7 const flexContainer = document.querySelector(&apo ...

javascripthtmlcss

When using $.post along with serialize, the post variables and values fail to be sent

I am trying to use jQuery to post data to process.php and then display everything that occurs in the processing file. Currently, I have successfully loaded the file using ajax. For example, when I type echo "Hello world!"; it returns Hello world! Howeve ...

phpjqueryhtmlajax

How can you use jQuery to display an image when hovering over text?

Looking for a tutorial or script that displays an image when hovering over HTML text with the mouse? ...

javascriptjqueryhtml

What is the best way to ensure my content is presented in a horizontal layout?

I am working on a movie website using PHP, HTML, CSS, and Bootstrap. My goal is to have the movies displayed horizontally with 3 movies per row instead of vertically like they are currently shown. https://i.sstatic.net/LmPJU.png Below is a segment of my ...

htmlcssbootstrap-4

I have tried using justify-content: center; and align-items: center; to center this div, but the container div is still not centered. How can I successfully center

I am having trouble centering the container in my HTML code HTML code:- <body> <div class="container"> <div class="image"> <img src="./images/image-qr-code.png" alt="qrcode"> & ...

htmlcsswebfrontend

Transitioning the <mat-icon> from one <mat-form-field> to another may not always result in the icon being updated consistently

Being new to Angular, I have been working on creating a form for blog posting and I am trying to include selectable category icons next to the title. In my current setup, I have made a form with selectable font awesome icons. However, I am facing an issue ...

javascripthtmlangularangular-fontawesome

What could be the reason that my Javascript function is not displaying in the HTML document?

I'm currently working on developing an HTML page that displays random quotes by Mark Twain. The function and array of quotes are set up in a separate Javascript file which is linked to the main HTML document. However, I am facing an issue where the ou ...

javascripthtml

In a local setting, the KendoUI chips are displaying without their borders

I recently tested out the code from kendo on StackBlitz and it worked perfectly: https://i.stack.imgur.com/Nrp2A.png However, when running the same code on my localhost, all the styling for the chip is missing: https://i.stack.imgur.com/1pUH9.png The c ...

htmlcssangularkendo-ui

Fixing inconsistent font sizes across various browsers

During the development of my website, I couldn't help but notice a significant variance in font sizes between Internet Explorer and other browsers. Here's an example of what my page looks like: I intended for it to resemble the first and second ...

htmlcss

Bootstrap 3 with a dual sidebar layout positioned on the left side

I am currently working on a project where I need to create a fluid layout with a left sidebar. However, now I would like to add an expandable sidebar next to the existing one. Below is an image to illustrate my goal: Initially, the left sidebar contains a ...

jqueryhtmlcsstwitter-bootstrap

Tips for eliminating excessive line breaks when incorporating a table tag into nl2br

In my dataset, I have content that consists of plain text, codes, and tables interchangeably. To keep the database optimized, I have limited the use of HTML tags by excluding pre tag for table and text, reserving it only for codes (spaces do not need to b ...

javascriptphphtmlnl2br

Encountering an issue while trying to execute the pagination page demo in PHP?

<?php include("include/db.inc.php"); $sql = mysql_query("SELECT * FROM emp"); $nr = mysql_num_rows($sql); if(isset($_GET['page'])){ $pn = preg_replace('#[^0-9]#i','',$_GET['page']); ...

phphtmlmysqlpagination

An issue with the blog tag occurs immediately following the if statement

I am working on rendering three columns per row in my HTML file with the help of Django2.1 and Bootstrap4. Here is a snippet of the HTML code I am using: <main class="container" role="main"> {% for treasure in treasures %} {% block row ...

htmldjangobootstrap-4

Resizing with Jquery results in sudden movement

I have used jQuery to create a set of buttons inside a <ul> element. I am now attempting to resize the <ul> by adding a handle to the top of it, but when I try to resize it, the element jumps as shown in the images below. What could be causing ...

jqueryhtmlcssjquery-ui

Make the inner div within the td stretch to cover the entire height of the td

Inside the first tds, there is dynamic text content that automatically expands the trs and tds. However, the second tds have a div with a background image but no text inside. I want these divs with background images to expand or collapse along with the tab ...

htmlcss

html interactive/expandable tree

I've come across this code which generates an HTML tree, but I'm facing an issue where the tree expands every time I refresh the page. What I want to achieve is to have certain branches expanded and others collapsed when the page is opened, depe ...

javascriptjqueryhtmlcss

Pass the input value directly to typescript without the need for a send button

I am looking to capture user input from a regular text box: <form> <input type="text" oninput="sendInput()" /> </form> My goal is to send the user's typed input directly to a typescript file without the need for a submit button ...

htmlangular

What is the best way to ensure my hover caption spans the entire size of the image?

I'm currently working on creating a hover caption that adjusts itself to fit the full width and height of an image even when it is resized. I attempted to implement a jQuery solution that I came across, but unfortunately, I am struggling to get it to ...

jqueryhtmlcsshovercaption