I have a Bootstrap 4 table filled with JSON data. The table renders perfectly on the UI, but users on smaller devices must scroll to view all the data. Despite there not being much data in the HTML table, users still need to scroll on small devices.
- I want the table data to display on the full screen of mobile screens
- Users should not have to scroll horizontally if there are less than 8 or 10 columns in a table
- I have a Bootstrap HTML table with only 6 columns that I want to display on the small screen UI of mobile phones without scrolling, but it's not happening.
Snippet
var data = [{
"amount": 518212,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR"
},
// Other data items...
]
// JavaScript functions for formatting and rendering the table
@media only screen and (max-width: 1500px) {
/* CSS styles for table headers and cells */
}
@media only screen and (max-width: 768px) {
/* Additional CSS styles for smaller screens */
}<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 rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div align="center" class="table table-responsive">
<table id="tblOlSalesSummary">
</table>
</div>I am looking to display the table on small devices without horizontal scrolling, even for minimal amounts of data.
If anyone can help me achieve this goal of showing the table on small devices within one view without any horizontal scrolling, it would be greatly appreciated.