html div pop width in responsive

Question

I have a table for which I am applying DataTable JQuery to make it responsive. I also wanted the header to be fixed at top and the table height to fill the window height(tbody has scroll).

On each cell click I am displaying a popup kind of div(each cell has its own hidden div that I need to display upon clicking on the cell content).

Issues:

1. I need the popup div width to always leave first two columns of the table and cover the rest of the columns and it needs to be responsive. First two columns should always be visible. I applied 25% width to first two columns and then used following jquery to set the width of popup.

   var d=$( window ).width();
   var dw = ((d/100)*81.5)-108;
   $(".popupdiv").css("width", dw);
   

2. In the popup from some cells I am displaying a table(child table). To make it responsive, I applied same DataTable JQuery, but the thead(header) is not taking 100% width of the popup div where as the tbody is taking 100%, so the table structure is messed.

I am unable to find any solution to these two. Thanks in anticipation.

Answer 1

Sorry for the late reply. I used a different approach. I am no longer using the above.

Thank you anyways.