Currently utilizing Bootstrap to create a responsive HTML table on smaller devices like the iPad, but seeking a more polished and professional alternative. Searching for a JQuery/JavaScript or CSS solution without relying on plugins.
Would appreciate any suggestions on achieving a great-looking responsive design similar to the provided example using pure JQuery/JavaScript or CSS techniques?
When it comes to handling narrow screens, one method I often utilize involves implementing media queries. These queries can be applied via CSS to reformat the display when necessary by adjusting the layout to mimic individual table rows.
CSS
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Alter table structure */
table, thead, tbody, th, td, tr {
display: block;
}
/* Conceal table headers for layout purposes */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Replicated as a "row" element */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Styled like a table header */
position: absolute;
top: 6px;
left: 6px;
width: 45%;
}
/*
Labeling data columns
*/
td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
td:nth-of-type(4):before { content: "Favorite Color"; }
td:nth-of-type(5):before { content: "Wars of Trek?"; }
td:nth-of-type(6):before { content: "Porn Name"; }
td:nth-of-type(7):before { content: "Date of Birth"; }
td:nth-of-type(8):before { content: "Dream Vacation City"; }
td:nth-of-type(9):before { content: "GPA"; }
td:nth-of-type(10):before { content: "Arbitrary Data"; }
}
/* Responsive design for Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
body {
padding: 0;
margin: 0;
width: 320px; }
}
/* Responsive design for iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body {
width: 495px;
}
}
HTML
<h1>Responsive Table</h1>
<p>In this case, the table structure remains consistent, but with @media queries in place to ensure appropriate adjustments are made if the screen size is restricted. This allows for efficient utilization of horizontal space while maintaining readability through vertical scrolling.</p>
...
I have recently created a JavaScript tool that achieves exactly this purpose. It functions by utilizing a similar system to datatables.net, where a collapsed content row is inserted beneath the original row. Check out my animation demonstrating the tool, and find the complete source code available here.
I hope you find this helpful.
Ps: Please note that this tool requires jquery for optimal performance.
If you are looking to avoid plugins, there are a few options available:
Create a scrollable table similar to the one provided by Bootstrap
Hide less important columns using media queries
Adjust font size with media queries, although this may impact usability
I am currently developing an application that utilizes AJAX to fetch JSON data and then uses an ES6 template literal to construct the view. It's a simple demonstration: let mountPoint = document.getElementById("mountPoint"); let view = document.cre ...
I implemented a login function to verify credentials on my backend server, but I am facing an issue with waiting for the server response. Despite following the es7-async-await.js guide and trying various async/await and promise techniques, the function sti ...
I am currently working on a project that requires the use of tabbing control with flyingbox. To achieve this, I consulted the following link: After referring to the above link, I made some modifications to my project. I am retrieving details from another ...
After creating a new Vue app (using Vite) with npm init vue@latest and selecting Playwright for e2e tests, the configuration file was generated with a field for setting headless mode: const config: PlaywrightTestConfig = { // ... use: { // ... ...
I am having trouble validating the fields in my index.html and js files. I keep seeing errors, even after trying different versions of angular-route.min.js and angular.js. AngularJs | Basic Login Form <body ng-app="myApp"> ...
Basically, I am looking to display different content based on the status of a job: Show 'Something1' when the job is not processing Show 'Something2' when the job is running and has a status of '0' Show 'Something3&apos ...
I am trying to create an angularjs filter that outputs HTML, similar to what is discussed in the link, but I am encountering issues. In my HTML code, I have: <ul> <li ng-repeat="book in books | filter:query"> {{book.title}} ...
Recently, I came across this URL: All I want to do is extract the zestimate and include it in a list. The specific class where it's located is: class="Text-c11n-8-65-2__sc-aiai24-0 eUxMDw". I attempted to target it at a higher level in th ...
Utilizing AJAX, this function retrieves information about an image in the database with the ID of 219 when a button is clicked. Any visitor to this webpage has the ability to alter the JavaScript code by inspecting the source code. By modifying the code a ...
I recently developed three PHP pages. The first one consists of the following form: <form method="POST" name="go" action="search_form_all.php" > <input name="value" type="text" id="search_form_1" size="65" placeholder="enter name"/> <i ...
Here is the jQuery script I am working with: <script> $(document).ready(function(){ $("#username").blur(function() { //remove all the class add the messagebox classes and start fading $("#msgbox").removeClass().addClass('messagebox&ap ...
I'm currently working on integrating the menu.php file into my main.php. Here is what I have accomplished so far: Main.php <html> <body> <?php include("menu.php"); ?> <p>This is an example to demonstrate how ...
Is there a way to fix the left table column (date and all column names) in Bootstrap 3.3.7? I attempted to use position: fixed; but it didn't work as expected. Any suggestions on what I should do next? Check out this fiddle for reference <scr ...
Recently, I started the process of migrating a project from create-react-app to next.js. However, I am facing uncertainty when it comes to migrating the backend of the project. Currently, my backend is built with an express server. In next.js, there are p ...
It is important to note that the image source must be declared in the HTML code as it will be dynamic, and therefore background cannot be used here. HTML <div class='some-form'> <form> <button>...<button> <i ...
My goal is to attach this navigation bar to the bottom of a header, but it's sticking to the top instead. I want the navigation to remain at the bottom of the header even when the user scrolls down. Currently, both the header and navigation are set t ...
Similar Question: socket.io: Failed to load resource I'm having trouble getting a simple express + socket.io hello world app to work. I keep receiving the following error: "NetworkError: 404 Not Found - http:// localhost:3002/socket.io/socke ...
I am encountering an issue with my server-side code where a value I am sending is not being interpreted correctly. My project is utilizing the experimental App directory feature of NextJS. //src/app/api/auth/route.js export async function POST(req, res) { ...
Is it possible to access the innermost object without knowing the path names? Consider this JSON example: const data = { first: { second: { third: {innerObject} } } ...
I am looking to personalize the appearance of a JavaFX PopOver control. I have a button that triggers the display of the PopOver. Below is a functional example: package custompopover; import javafx.application.Application; import javafx.event.ActionEvent ...