responsive table detail view

How we can create a table with details view using HTML CSS JS? Solution: See this Responsive Table Detail View With Full Screen Modal, Table with Details.

Previously I have shared some table programs, but it is a little different because it has a detail view with the full-screen modal layout. Basically, A table is an arrangement of data in rows and columns, or possibly in a more complex structure. And we store different types of data like user’s information, order history, etc in the table. But a table can contain data according to the width of the device, we can’t put everything in the table. It will break the structure of the table and maybe of the whole website. That’s why we use a details view section in the table, where you can see all the data in a separate section.

Today you will learn to create a table with details view. Basically, there is a table with few rows and 3 columns where some dummy data available.  There is a name section, email section, and a button for details views.  When you will click on the details button a full-screen modal will appear, where you will see all the data. And in the top-right side of the modal, there is a close button for closing the detail view. Both segments table and details view have a responsive design.

So, Today I am sharing Responsive Table Detail View With Full Screen Modal. There I have used HTML to create the layout, CSS for styling and animations, jQuery for toggle open/close the detail view. There are dummy table contents and single modal view details, you can create separate details for every table items. You can use this program on your website in frontend and backend also.

If you are thinking now how this table detail view program actually is, then see the preview given below.

Preview Of Full Screen Modal Table Details

See this video preview to getting an idea of how this table details program looks like.

Live Demo

Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

You May Also Like:

Responsive Table Detail View Source Code

Before sharing source code, let’s talk about it. First I have created the main section using HTML <main> tag and placed a table and other items inside it. Inside the table, I placed headings and 4 data rows with name, email, and detail button. After that, I have created a div section with class name ‘details’ for details modal view. Inside that, I have placed all the data. Also in the HTML file, I have linked other files like CSS, JS, and jQuery CDN.

Now using CSS I have placed all the items in the right place, as you can see in the preview. With CSS first I gave basic values like size, position, margin, padding, etc to all the elements. There I have pass data using HTML Data-* attribute. For the effects, I have used transform command and transition command. There I have used @media query to create a responsive design.

jQuery handling here only toggle on-off or open-close the detail view screen in the program. There I have used jQuery .toggleClass command to create the toggle effect. Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First for HTML, second for CSS, and third for JavaScript.

Follow the steps to creating this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given below.

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

That’s It. Now you have successfully created Responsive Table Detail View With Full Screen Modal, Table with Details. If you have any doubt or questions comment down below.

Thanks For Visiting, Keep Visiting.

1 COMMENT

  1. Hi there, I have applied this to react project and when the list load dynamically, this not work properly.
    Any suggestion would be highly appreciate.

LEAVE A REPLY

Please enter your comment!
Please enter your name here