How Can Create a Responsive Configurable list

Sir i want to create responsive table with Configurable list below fields:

Class : text : Class

Subject : text : Subject

Board/University : text : Board/Univ.

Roll_No: number : Roll Num.

Passing_Date : text : dd/mm/yyyy 

Max.Mark: number : Max Mark

Mark.Opt.: number : Opt. Mark

%/Grade: text : %/Grade

Division : dropdown : First, Second, Third, Pass : Select

Certif_No.: number : Cert. No

How can control every column width like fix, auto

Sir please help me how can create this table in form.

Making the config list widget responsive requires custom CSS codes. The custom CSS codes below will automatically move the overlapping fields to the next line. This makes all the fields to fit perfectly in the widget container.

You can get the CSS codes here: http://pastebin.com/raw/uqyS6P6u

You must inject this CSS codes on that particular widget. Open its properties, under the Custom CSS tab, paste the above CSS.

Example:

Result:

If you have further questions, let us know.