Review Before Submit: Fix Table Layout Using Custom CSS Codes

Hi,

Please help fix the table during the review of answers.

Hi Dan,

Thanks for reaching out to Jotform Support. I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Hi Dan,

To fix the table layout in mobile preview mode, you can inject custom CSS into your form. Let me show you how to do this using a cloned version of your form.

1. First, copy this code:

@media screen and (max-width: 600px) {

  table.table-grid {

    width: 100% !important;

    table-layout: auto;

    border-collapse: collapse;

  }



  .table-grid th,

  .table-grid td {

    font-size: 12px !important;

    padding: 6px 4px !important;

    text-align: center;

    white-space: nowrap!important; /* Allow breaking */

    word-break: break-word !important;

  }

  .table-grid th:first-child,

  .table-grid td:first-child {

    text-align: left;

    width: 40% !important;

  }

  .table-grid th:nth-child(2),

  .table-grid td:nth-child(2),

  .table-grid th:nth-child(3),

  .table-grid td:nth-child(3),

  .table-grid th:nth-child(4),

  .table-grid td:nth-child(4) {

    width: auto !important;

  }

  .form-matrix-value-tr td img {

    max-width: 16px;

    height: auto;

  }

  table.table-grid::-webkit-scrollbar {

    display: none;

  }

  table.table-grid {

    -ms-overflow-style: none;  

    scrollbar-width: none;     

  }

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Here's the sample result after injecting the custom CSS codes:

Give it a try and let us know how it goes.

Hi Aries,

Thank you for providing the answer, and it worked.

Hi Dan,

Glad to know that the solution provided by my colleague worked for you. As for your other question, I've moved that to a new thread. You can check that out here.

Let us know if there's anything else we can help you with.

Hi martinezangel32372,

To avoid confusion, I moved your other question to a new thread and helped you with that here.

Reach out again if you need any help.