How to increase the space between columns with Custom CSS codes?

How to custom CSS in order to increase the space between columns?

Thank you very much in advance.

You seem to have figured it out already. If you still need to modify the spacing, let us know the field so we can guide you about it. 

Basically, you need to inject a custom CSS codes to do it. You can use positioning and left margins, example:

th {

    left: 20px !important;

    position: relative;

}

td {

    left: 5px !important;

    position: relative;

}

Here's how to inject a custom CSS Codes in the widget: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets. 

Thanks Welvin for such promptly reply. May i know how to change the width of field?

Thanks again.

For the entire input field width, you can inject the following custom CSS codes:

input[type=text] {

    width: 100px !important;

}

If this is for the specific input field, add the class selector .col1 or .col2, and so on. Example:

.col1 input[type="text"] {

    width: 200px;

}

 Million thanks to Welvin !

I get that the first column is named "Td" and "Th" for the text caption and text box respectively. But

@technisourcetraining

I have opened a new thread of your query to keep things in order.

Please find it here: https://www.jotform.com/answers/1305197