Issues with DataTable display on smaller screens

My Data-table is functioning properly, but I am encountering an issue when using the same table on a small device

Snippet

var data = [...] 
var columndef = [...]

$('#tbl').DataTable({
  columns: columndef,
  data: data,
  scrollY: '50vh',
  scrollCollapse: true,
  paging: false
});
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

<table id="tbl" class="table table-striped table-bordered "></table>

While the table works fine on larger devices, when viewed on a smaller screen, the tbody part scrolls horizontally while the thead remains static, causing issues with the user interface.

To replicate the problem, resize the browser and scroll horizontally. Are there any alternative solutions available for this issue?

javascriptjqueryhtmlcssdatatable

Answer №1

To resolve the issue, I recommend including both scrollX: "100%" (usually necessary with scrollY) in your datatables options and setting width: 100% for your table in the CSS. This should address the problem you are facing. Please refer to the code snippet below and the provided fiddle link for further clarification.

var data = [{
    "amount": 518212,
    "billdate": "2018-08-04",
    "outlet": "JAYANAGAR"
  },
  // Additional data entries...
];
var columndef = [{
  title: "amount",
  data: "amount"
}, {
  title: "billdate",
  data: "billdate"
}, {
  title: "outlet",
  data: "outlet"
}];
$('#tbl').DataTable({
  columns: columndef,
  "columnDefs": [{
    "className": "dt-left",
    "targets": "_all"
  }],
  data: data,
  scrollY: "50vh",
  responsive: true,
  paging: false,
  scrollX: "100%",
  scrollCollapse: true
});
#tbl {
  width: 100%!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

<table id="tbl" class="table table-striped table-bordered "></table>

Fiddle : https://jsfiddle.net/bucvf6ek/2/

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

Struggling to hide the scrollbar - having trouble mastering the correct CSS technique

Upon visiting this website, you may notice a horizontal scrollbar. This issue seems to only occur on pages with a comments section, specifically within the <div id="commentsbackground">. I desire to maintain the current style and appearance, while e ...

htmlcsswordpress

Jquery error caused by index variable in form validation issue

While attempting to validate 8 radio buttons, I encountered a peculiar issue related to indexing. The process involved looping through the 8 radio buttons to check if they had been selected. If all 8 buttons remained unchecked, an alert would be triggered ...

jquery

PHP: Best practices for structuring SQL queries and creating HTML dropdown menus

Trying to implement a dropdown selection box for different attributes of a product on the product page, like weight, flavor, or color. The current database structure for products is as follows: products(id,productname,productprice) productattributes(id,p ...

phphtmlsqllaraveldatabase-design

Fetching JSON Data from Web Service using Ajax URL Field - A Simple Guide

I'm facing an issue while attempting to retrieve JSON Data from a web service using ajax url. This is how I have coded it so far: <script type="text/javascript> $('#kategoriTable').dataTable({ ajax: { u ...

javascriptjqueryjsonajax

Ways to eliminate the lower boundary of Input text

Currently, I am working on a project using Angular2 with Materialize. I have customized the style for the text input, but I am facing an issue where I can't remove the bottom line when the user selects the input field. You can view the red line in t ...

javascriptcssangularsassstyles

Creating a flexible grid layout using Flexbox and JavaScript media queries to dynamically adjust container size

I enjoy working on Etch-a-Sketch projects from The Odin Project, but I am looking to take it a step further than just the assignment. I want to challenge myself by achieving this solely with Flexbox and JavaScript, without involving CSS Grid. When I se ...

javascriptflexboxmedia-queries

Improving the layout and size of text within input fields

How can we adjust the input text positioning to the right so it's not directly against the edge? Is there a way to move 'searching' 5px to the right? ...

htmlcss

Enrich an HTML table using jQuery based on an indentation pattern

                 Overview: Currently, my colleague and I are working on developing an inventory control system using the Django Framework within our department. While most aspects of the system are operational, we are encountering ...

javascriptjqueryhtmldjango

css position:absolute stacked

Looking for a solution, I'm trying to include a side menu (navbar) on my page by using position: fixed. However, I am facing an issue where all the HTML elements I attempt to add are ignoring it. Check out the positioning problem here. ...

htmlcss

Include the jquery library and embed a Google Map

Hello, I am using jQuery load to refresh my page every second. The problem arises when I add a Google Map to the page - the map appears and disappears every second. Is there a way to fix this issue? $(document).ready(function(){ <?php if( ...

javascriptphpjquerygoogle-mapsload

Combining images and text from diverse sources

I'm currently engaged in some web scraping, attempting to extract both the image and text from different classes, and then showcase them together. Below is an example of the HTML snippet: <div class="thumbnail"> <div class="i ...

javascriptjquerytypescriptloopsweb-scraping

Is there a faster way to sort this data with Javascript (or JQuery for extra speed)?

Recently, I've encountered a challenge with sorting an HTML table using JavaScript. The table can potentially contain over a thousand rows. This is what my current setup looks like in terms of HTML: <div id="mycollection" class="table"> &l ...

javascriptjqueryhtmlsorting

Incorporating DataTables into Laravel

I want to enhance the tables in my Laravel project by implementing DataTables. The current appearance of my tables is plain and simple like this: https://i.sstatic.net/Y9VHb.png However, I aspire for them to have a more organized and visually appealing l ...

jquerylaravelbootstrap-4datatabledatatables

JS-generated elements do not automatically wrap to the next line

For my first project, I've been working on a to-do list and encountered an issue. When I create a new div with user input, I expect it to start on a new line but it remains stuck on the same line. Can anyone point out where I might have gone wrong? I ...

javascripthtmlcss

Center JQuery within the current screen

My implementation of Jquery dialog is as follows: <body> <div id="comments_dialog"> Insert a comment <form> <input type="text" id="search" name="q"> </form> </div> .... </body> dialog = $( "#com ...

javascriptjqueryhtmlcss

changing the width of child divs that are displayed inline

Hey everyone, I'm currently working on a project where each child div needs to have the full width of the container and display inline, similar to an inline navigation menu. While I've been able to achieve this effect, my current method is not ve ...

htmlcss

The function Server.listeners is not recognized by the system

Currently, I am following a tutorial on websockets to understand how to incorporate Socket.IO into my Angular project. Despite meticulously adhering to the instructions provided, I encountered an error when attempting to run my websockets server project: ...

javascriptnpmwebsocket

PHP is having trouble updating the database when multiple radio buttons are selected. It appears that only the most recent radio button selected will be updated in the database

In my form, there are 2 numbers and 4 radio buttons for each. Only one option can be selected per number. When the form is submitted, only the database for question 2 will be updated. However, if question 2 is left blank, then question 1's database w ...

phphtmlmysql

What steps should I take to ensure that the JSONP request yields a response?

The main objective of the following functions is to connect to a script located on Yahoo's servers and retrieve a real-time currency conversion rate. This information is then utilized in processing customer transactions. Although I am able to access ...

javascriptjquerycallbackreturnjsonp

Apply a red border to any form inputs that contain incorrect information when the submit

How can I add red borders to my form inputs only when they are invalid after submission, without displaying the red borders from the start? Currently, I am using the input:invalid selectors in CSS, but this causes the red borders to appear immediately. I ...

htmlcssformsvue.jsvalidation