Data tables that are able to scroll horizontally without the need for any framework and

Question

Data tables that are able to scroll horizontally without the need for any framework and

Seeking a responsive table solution similar to Bootstrap, but without using Bootstrap's Javascript and CSS due to the website being built from scratch with no frameworks. Check out this demo: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_table-responsive&stacked=h

Wondering if there is a straightforward solution to achieve this effect using just CSS and basic Javascript, or maybe a jQuery plugin? Explored different options but haven't found one that simply adds a vertical scroll bar.

html css

Answer 1

Answer №1

Here's everything you require:

.yourTableClass {
  display: block;
  overflow-x: auto;
}

Check it out:

table {
  display: block;
  overflow-x: auto;
}


/* The following rules are unnecessary! */
table {
  margin: 0 1rem;
}
td {
  white-space: nowrap;
  padding: 3px 8px;
}

<table>
  <tr>
    <th> 1 </th>
    <th> 2 </th>
    <th> 3 </th>
    <th> 4 </th>
    <th> 5 </th>
    <th> 6 </th>
    <th> 7 </th>
    <th> 8 </th>
    <th> 9 </th>
    <th> 10 </th>
  </tr>
  <tr>
    <td> first column</td>
    <td> second column</td>
    <td> third column</td>
    <td> fourth column</td>
    <td> fifth column</td>
    <td> sixth column</td>
    <td> seventh column</td>
    <td> eighth column</td>
    <td> nineth column</td>
    <td> tenth column</td>
  </tr>
</table>

Answer 2

Here's everything you require:

.yourTableClass {
  display: block;
  overflow-x: auto;
}

Check it out:

table {
  display: block;
  overflow-x: auto;
}


/* The following rules are unnecessary! */
table {
  margin: 0 1rem;
}
td {
  white-space: nowrap;
  padding: 3px 8px;
}

<table>
  <tr>
    <th> 1 </th>
    <th> 2 </th>
    <th> 3 </th>
    <th> 4 </th>
    <th> 5 </th>
    <th> 6 </th>
    <th> 7 </th>
    <th> 8 </th>
    <th> 9 </th>
    <th> 10 </th>
  </tr>
  <tr>
    <td> first column</td>
    <td> second column</td>
    <td> third column</td>
    <td> fourth column</td>
    <td> fifth column</td>
    <td> sixth column</td>
    <td> seventh column</td>
    <td> eighth column</td>
    <td> nineth column</td>
    <td> tenth column</td>
  </tr>
</table>

Data tables that are able to scroll horizontally without the need for any framework and

Answer №1

Similar questions

Altering the "src" property of the <script> tag

Encountering an unexplained JSON error while working with JavaScript

Using jQuery to target a specific item from a retrieved list of elements

The One-time-password (OTP) page fails to display following the successful transmission of the OTP to the user through PHP

Switching classes on the currently active tab

Is there a way to modify an Amplify SignUp Attribute module?

Determine the optimal width for each element based on the total number of instances of that element present

Struggling with displaying a CSS dropdown menu below its parent element?

Would it be frowned upon to select unique elements by referencing their class or ID through a string?

Identifying Instances of Classes with the Identical Name Using Selenium

Determining the number of columns and rows within an HTML table

Struggling to implement a vertical scroll bar in HTML code?

I'm having trouble getting the footer to stay at the bottom of the window instead of the page. Any tips on

Displaying a header on each page along with a gridview that has authentic pagination

An error occurred due to an invalid model value being used in a foreach loop

Issue with Bootstrap 5 collapse not toggling back on second button press

The href attribute in a stylesheet link node is malfunctioning

Jquery function for determining height across multiple browsers

When the browser width is reduced, the text appears outside of the image

Using jQuery, how can I dynamically change the stacking order of an element when clicked?