Responsive Form Design

[IvanConway]

I have designed a form using Dreamweaver CS3.  The form was designed using tables.  I am having an issue with a section of the form that contains 4 columns.  Column 1 is used as the description or label for the input field in column 2.  The same applies for column 3 & 4.  I am trying to design a media query that will make the form more responsive on smaller mobile devices and tablets.

I have attached a section of my form containing the 4 columns and included the media query I am currently using.  The overall design has been working successfully for over two years apart from the responsiveness issue on smaller mobile devices and tablets.

Apart from a total re-design of the entire layout, is it possible to make the 4 column table more responsive using the table method I have attached.

 

table.html

Edited April 9, 2018 by IvanConway
Upload error.

[dsonesuk]

Tables because of how they are structured, can't be responsive, as the device gets smaller, you will need labels and inputs to stack above each other, 4 columns into 2, 2 into a single column, tables just can't do that!

[IvanConway]

Thank you, that was my line of thinking as well. However I thought I may have missed a solution in my research.  Looks like a re-desiign coming up.