Como justificar el texto en una tabla de entrada?

Hola!

Necesitaría poder justificar el texto de las filas de una tabla de entrada, he podido poner frases en negrita a través de los caracteres </b>, y quería saber si había alguna forma de justificar el texto seleccionado en la siguiente fotografía:

Otra cosa que necesito, es saber como cambiar el tamaño de las columnas, las quiero hacer más anchas pero no lo consigo usando las siguientes opciones:

Espero su respuesta, gracias!

Hi Marta,

Thank you for reaching out to Jotform Support. I am currently using a translation to provide assistance, but if you want to get assistance in the Spanish language, we can forward your request to our Spanish Support Team, please note that it may take longer to receive a response.

Please note that HTML tags like <b> will not work on the fields as this has been disabled due to security reasons. However we can justify the text and increase the width of the column using custom CSS. Check out the steps and screencast below to see how it's done:

• Open your form in Form Builder and click on the blue Paint Roller icon on the right side of the screen.
• Under the Styles tab, paste the code below into the Inject Custom CSS area.

/*Column width and alignment - 5590558*/

th.form-matrix-headers.form-matrix-row-headers {

    text-align: center;

}



th.form-matrix-th {

    width: 57%;

}

• Click on Save, and you're done.

Here's what the result will look like:

Here's the cloned version of the form that you can test.

Please give it a try and let us know how it goes. 

Hi Afzal,

We can continue in English, it's no problem cause I'm interested in getting quick responses :)

Thanks for your time, but that would not be the result I was looking for, I need the table to look like the following (which I did using <b> characters but according to your indications cannot be used):

• First sentence of each box should be in bold letters
• The following sentences should begin in the second line of each box
• I would want the text to be justified (not centered, as you propose in the cloned version)

Thanks!

Marta

Hi Marta,

There is no direct way to bold the specific text in the form builder without using custom CSS. You can try adding this CSS codes:

/* 1st header row*/



#cid_25 .form-matrix-value-tr:nth-child(2):after {

   font-size: .75em;

  position: absolute;

    content:"Compliance with environmental and sustainability regulations ";

    font-weight: bold;

    margin-left: -881px;

    margin-top: 5px;

    text-align: justify;

    white-space: initial;

}



#cid_25 .form-matrix-value-tr:nth-child(2) .form-matrix-row-headers{

  border-top: 11px solid #c3cad800;  

}

/*2nd header row*/

#cid_25 .form-matrix-value-tr:nth-child(3):after {

   font-size: .75em;

   position: absolute;

    content:"Management, maintenance and obtention of environmental cenrtifications ";

    font-weight: bold;

    white-space: pre;

   margin-left: -883px;

    margin-top: 5px;

}

.form-matrix-value-tr:nth-child(3) .form-matrix-row-headers{

  border-top: 11px solid #c3cad800;  

}

/*3rd header row*/

#cid_25 .form-matrix-value-tr:nth-child(4):after {

   font-size: .75em;

   position: absolute;

    content:"Management of environmental risks ";

    font-weight: bold;

    white-space: pre;

    margin-left: -97%;

    margin-top: 5px;

}

.form-matrix-value-tr:nth-child(4) .form-matrix-row-headers{

  border-top: 11px solid #c3cad800;  

}

/*5*/

#cid_25 .form-matrix-value-tr:nth-child(5):after {

   font-size: .75em;

   position: absolute;

    content:"Circular economy and waste management efficiency ";

    font-weight: bold;

    white-space: pre;

    margin-left: -883px;

    margin-top: 5px;

}

.form-matrix-value-tr:nth-child(5) .form-matrix-row-headers{

  border-top: 11px solid #c3cad800;  

}

/**/

#cid_25 .form-matrix-value-tr:nth-child(6):after {

   font-size: .75em;

   position: absolute;

    content:"Prevention and control of atmospheric pollution and air quality \A ";

    font-weight: bold;

    white-space: pre;

    margin-left: -880px;

    margin-top: 5px;

}

.form-matrix-value-tr:nth-child(6) .form-matrix-row-headers{

  border-top: 11px solid #c3cad800;  

}

#cid_25 .form-matrix-value-tr:nth-child(7):after {

   font-size: .75em;

   position: absolute;

    content:"Prevention and control of soil and water pollution \A ";

    font-weight: bold;

    white-space: pre;

    margin-left: -880px;

    margin-top: 5px;

}

.form-matrix-value-tr:nth-child(7) .form-matrix-row-headers{

  border-top: 11px solid #c3cad800;  

}



#cid_25 .form-matrix-value-tr:nth-child(8):after {

   font-size: .75em;

   position: absolute;

    content:"Efficiency in water usage and management \A ";

    font-weight: bold;

    white-space: pre;

    margin-left: -880px;

    margin-top: 5px;

}

.form-matrix-value-tr:nth-child(8) .form-matrix-row-headers{

  border-top: 11px solid #c3cad800;  

}

#cid_25 .form-matrix-value-tr:nth-child(9):after {

   font-size: .75em;

   position: absolute;

    content:"Efficiency in water usage and management \A ";

    font-weight: bold;

    white-space: pre;

    margin-left: -880px;

    margin-top: 5px;

}

.form-matrix-value-tr:nth-child(9) .form-matrix-row-headers{

  border-top: 11px solid #c3cad800;  

}

#cid_25 .form-matrix-value-tr:nth-child(10):after {

   font-size: .75em;

   position: absolute;

    content:"Integration and energy efficiency in production processes \A ";

    font-weight: bold;

    white-space: pre;

    margin-left: -880px;

    margin-top: 5px;

}

.form-matrix-value-tr:nth-child(10) .form-matrix-row-headers{

  border-top: 11px solid #c3cad800;  

}



#cid_25 .form-matrix-value-tr:nth-child(11):after {

   font-size: .75em;

   position: absolute;

    content:"Use of renewable energies and alternative fuels\A ";

    font-weight: bold;

    white-space: pre;

    margin-left: -880px;

    margin-top: 5px;

}

.form-matrix-value-tr:nth-child(11) .form-matrix-row-headers{

  border-top: 11px solid #c3cad800;  

}

#cid_25 .form-matrix-value-tr:nth-child(12):after {

   font-size: .75em;

   position: absolute;

    content:"Climate risks and adaptation \A ";

    font-weight: bold;

    white-space: pre;

    margin-left: -880px;

    margin-top: 5px;

}

.form-matrix-value-tr:nth-child(12) .form-matrix-row-headers{

  border-top: 11px solid #c3cad800;  

}

#cid_25 .form-matrix-value-tr:nth-child(13):after {

   font-size: .75em;

   position: absolute;

    content:"Mitigation of GHG emissions \A ";

    font-weight: bold;

    white-space: pre;

    margin-left: -880px;

    margin-top: 5px;

}

.form-matrix-value-tr:nth-child(13) .form-matrix-row-headers{

  border-top: 11px solid #c3cad800;  

}



#cid_25 .form-matrix-value-tr:nth-child(14):after {

   font-size: .75em;

   position: absolute;

    content:"Respecting biodiversity and preserving natural resources \A ";

    font-weight: bold;

    white-space: pre;

    margin-left: -880px;

    margin-top: 5px;

}

.form-matrix-value-tr:nth-child(14) .form-matrix-row-headers{

  border-top: 11px solid #c3cad800;  

}



/*Next page*/

#cid_45  .form-matrix-value-tr:nth-child(2) .form-matrix-row-headers{

  border-top: 11px solid #c3cad800;  

}

#cid_45 .form-matrix-value-tr:nth-child(2):after {

   font-size: .75em;

   position: absolute;

    content:"Implementation of socially fair labour practices \A ";

    font-weight: bold;

    white-space: pre;

    margin-left: -880px;

    margin-top: 5px;

}

#cid_45 .form-matrix-value-tr:nth-child(3):after {

   font-size: .75em;

   position: absolute;

    content:"Promotion of practices to reduce the wage gap \A ";

    font-weight: bold;

    white-space: pre;

    margin-left: -880px;

    margin-top: 5px;

}



#cid_45 .form-matrix-value-tr:nth-child(4):after {

   font-size: .75em;

   position: absolute;

    content:"Existence of wok-life balance and work disengagement practices\A ";

    font-weight: bold;

    white-space: pre;

    margin-left: -880px;

    margin-top: 5px;

}

#cid_45 .form-matrix-value-tr:nth-child(5):after {

   font-size: .75em;

   position: absolute;

    content:"Promotion of health and safety at the work-place \A ";

    font-weight: bold;

    white-space: pre;

    margin-left: -880px;

    margin-top: 5px;

}

#cid_45 .form-matrix-value-tr:nth-child(6):after {

   font-size: .75em;

   position: absolute;

    content:"Talent attraction and human capital development \A ";

    font-weight: bold;

    white-space: pre;

    margin-left: -880px;

    margin-top: 5px;

}

#cid_45 .form-matrix-value-tr:nth-child(7):after {

   font-size: .75em;

   position: absolute;

    content:"Equal opportunities, diversity and flexibility \A ";

    font-weight: bold;

    white-space: pre;

    margin-left: -880px;

    margin-top: 5px;

}

#cid_45 .form-matrix-value-tr:nth-child(8):after {

   font-size: .75em;

   position: absolute;

    content:"Human Rights in all direct operations and the supply chain \A ";

    font-weight: bold;

    white-space: pre;

    margin-left: -880px;

    margin-top: 5px;

}

#cid_45 .form-matrix-value-tr:nth-child(9):after {

   font-size: .75em;

   position: absolute;

    content:"Fostering community well-being \A ";

    font-weight: bold;

    white-space: pre;

    margin-left: -880px;

    margin-top: 5px;

}

Checkout the screenshot of my test result:

You can also check my cloned form to test it out.

Give it a try and let us know if this works for you.

Hi Richie,

Thanks for the help!

Could you take a look to the following and tell me why this form (232493494680061) allows me to use the format I want and in the next one it doesn't (232704154585356)? (I'm always talking about the entry tables)

I can't find the difference...

Thanks!

Marta

Hi Marta,

Thanks for getting back to us. As mentioned earlier, the HTML tags are being disabled from all form elements due to security reasons. As per the last update from our developer's team, we are disabling them in different stages. Eventually, the HTML tags on the other form will also stop working. You can try the workaround suggested by my colleague Richie and let us know if you have any questions about it.

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

Hi,

the CSS code you provided seems to work, but when sharing the link to the users this is how it looks:

Is there a way to add the normal-weight paragraph into the CSS code so that it displays correctly?

Also, can the headers of the columns also be edited?

Thanks!

Marta

Hi Marta,

You can add this CSS code to increase the top padding on the row header and fit the text properly. This will only affect the first two Input Tables on the form

/*Increase top padding of row headers for the first two Input Tables*/

#cid_25 > table > tbody > tr > th.form-matrix-row-headers, #cid_45 > table > tbody > tr > th.form-matrix-row-headers {

  padding-top: 30px !important;

}

/*Ends here*/

Here's the result:

And yes, we can also apply CSS codes to the column headers. Let us know how you'd like to modify them.

Hi Gilbert,

Thanks for the code! How can I apply it everything to the third table of the form?

I would like the column headers to have the first word in bold and the rest of the text being normal weight and in the second line. Just like the following picture:

Thanks!

Hi Marta,

Alright, let me look into it and get back to you with a solution.

Thanks for your patience Marta,

You can add these CSS codes to the form. Before adding the codes below, delete first the column header text to be bolded on the 1st Input table. Do the same to the 2nd and 3rd Input Tables.

Then, delete the row header text to be bolded in the 3rd Input Table:

After that, add these CSS codes. These will cover all 3 Input Tables so the 1st line of their row and column header text are bolded.

/*Manually add text to column headers of 1st Input Table*/

#cid_25 > table > tbody > tr.form-matrix-tr.form-matrix-header-tr > th.form-matrix-headers.form-matrix-column-headers.form-matrix-column_0:before {

  font-size: 1em;

  position: absolute;

  content:"Scale";

  font-weight: bold;

  margin-left: 4px;

  margin-top: -18px;

}



#cid_25 > table > tbody > tr.form-matrix-tr.form-matrix-header-tr > th.form-matrix-headers.form-matrix-column-headers.form-matrix-column_1:before {

  font-size: 1em;

  position: absolute;

  content:"Scope";

  font-weight: bold;

  margin-left: 4px;

  margin-top: -18px;

}



#cid_25 > table > tbody > tr.form-matrix-tr.form-matrix-header-tr > th.form-matrix-headers.form-matrix-column-headers.form-matrix-column_2:before {

  font-size: 1em;

  position: absolute;

  content:"Magnitude";

  font-weight: bold;

  margin-left: -7px;

  margin-top: -18px;



}



#cid_25 > table > tbody > tr.form-matrix-tr.form-matrix-header-tr > th.form-matrix-headers.form-matrix-column-headers.form-matrix-column_3:before {

  font-size: 1em;

  position: absolute;

  content:"Likelihood";

  font-weight: bold;

  margin-left: -5px;

  margin-top: -18px;



}

/*Ends here*/



/*Manually add text to column headers of 2nd Input Table*/

#cid_45 > table > tbody > tr.form-matrix-tr.form-matrix-header-tr > th.form-matrix-headers.form-matrix-column-headers.form-matrix-column_0:before {

  font-size: 1em;

  position: absolute;

  content:"Scale";

  font-weight: bold;

  margin-left: 4px;

  margin-top: -18px;

}



#cid_45 > table > tbody > tr.form-matrix-tr.form-matrix-header-tr > th.form-matrix-headers.form-matrix-column-headers.form-matrix-column_1:before {

  font-size: 1em;

  position: absolute;

  content:"Scope";

  font-weight: bold;

  margin-left: 4px;

  margin-top: -18px;

}



#cid_45 > table > tbody > tr.form-matrix-tr.form-matrix-header-tr > th.form-matrix-headers.form-matrix-column-headers.form-matrix-column_2:before {

  font-size: 1em;

  position: absolute;

  content:"Magnitude";

  font-weight: bold;

  margin-left: -7px;

  margin-top: -18px;



}



#cid_45 > table > tbody > tr.form-matrix-tr.form-matrix-header-tr > th.form-matrix-headers.form-matrix-column-headers.form-matrix-column_3:before {

  font-size: 1em;

  position: absolute;

  content:"Likelihood";

  font-weight: bold;

  margin-left: -5px;

  margin-top: -18px;

}

/*Ends here*/



/*3rd Input Table - add text to row headers*/

#cid_46 .form-matrix-value-tr:nth-child(2):after {

  font-size: .75em;

  position: absolute;

  content:"Fight against money laundering, corruption and bribery";

  font-weight: bold;

  margin-left: -880px;

  margin-top: 8px;

  margin-bottom: 5px;

  text-align: justify;

  white-space: initial;

}



#cid_46 .form-matrix-value-tr:nth-child(3):after {

  font-size: .75em;

  position: absolute;

  content:"Audits, supervision and certifications";

  font-weight: bold;

  margin-left: -880px;

  margin-top: 8px;

  margin-bottom: 5px;

  text-align: justify;

  white-space: initial;

}



#cid_46 .form-matrix-value-tr:nth-child(4):after {

  font-size: .75em;

  position: absolute;

  content:"Transparency and disclosure of information";

  font-weight: bold;

  margin-left: -880px;

  margin-top: 8px;

  margin-bottom: 5px;

  text-align: justify;

  white-space: initial;

}



#cid_46 .form-matrix-value-tr:nth-child(5):after {

  font-size: .75em;

  position: absolute;

  content:"Cybersecurity";

  font-weight: bold;

  margin-left: -880px;

  margin-top: 8px;

  margin-bottom: 5px;

  text-align: justify;

  white-space: initial;

}



#cid_46 .form-matrix-value-tr:nth-child(6):after {

  font-size: .75em;

  position: absolute;

  content:"Responsible management of commercial relationships";

  font-weight: bold;

  margin-left: -880px;

  margin-top: 8px;

  margin-bottom: 5px;

  text-align: justify;

  white-space: initial;

}



#cid_46 .form-matrix-value-tr:nth-child(7):after {

  font-size: .75em;

  position: absolute;

  content:"Risk management";

  font-weight: bold;

  margin-left: -880px;

  margin-top: 8px;

  margin-bottom: 5px;

  text-align: justify;

  white-space: initial;

}



#cid_46 .form-matrix-value-tr:nth-child(8):after {

  font-size: .75em;

  position: absolute;

  content:"Code of conduct";

  font-weight: bold;

  margin-left: -880px;

  margin-top: 8px;

  margin-bottom: 5px;

  text-align: justify;

  white-space: initial;

}



#cid_46 .form-matrix-value-tr:nth-child(9):after {

  font-size: .75em;

  position: absolute;

  content:"Innovation and digitization";

  font-weight: bold;

  margin-left: -880px;

  margin-top: 8px;

  margin-bottom: 5px;

  text-align: justify;

  white-space: initial;

}



#cid_46 .form-matrix-value-tr:nth-child(10):after {

  font-size: .75em;

  position: absolute;

  content:"Quality of products and services";

  font-weight: bold;

  margin-left: -880px;

  margin-top: 8px;

  margin-bottom: 5px;

  text-align: justify;

  white-space: initial;

}



#cid_46 .form-matrix-value-tr:nth-child(11):after {

  font-size: .75em;

  position: absolute;

  content:"Management of supplier relations";

  font-weight: bold;

  margin-left: -880px;

  margin-top: 8px;

  margin-bottom: 5px;

  text-align: justify;

  white-space: initial;

}

/*Ends here*/



/*Manually add text to column headers of 3rd Input Table*/

#cid_46 > table > tbody > tr.form-matrix-tr.form-matrix-header-tr > th.form-matrix-headers.form-matrix-column-headers.form-matrix-column_0:before {

  font-size: 1em;

  position: absolute;

  content:"Scale";

  font-weight: bold;

  margin-left: 4px;

  margin-top: -18px;

}



#cid_46 > table > tbody > tr.form-matrix-tr.form-matrix-header-tr > th.form-matrix-headers.form-matrix-column-headers.form-matrix-column_1:before {

  font-size: 1em;

  position: absolute;

  content:"Scope";

  font-weight: bold;

  margin-left: 4px;

  margin-top: -18px;

}



#cid_46 > table > tbody > tr.form-matrix-tr.form-matrix-header-tr > th.form-matrix-headers.form-matrix-column-headers.form-matrix-column_2:before {

  font-size: 1em;

  position: absolute;

  content:"Magnitude";

  font-weight: bold;

  margin-left: -7px;

  margin-top: -18px;

}



#cid_46 > table > tbody > tr.form-matrix-tr.form-matrix-header-tr > th.form-matrix-headers.form-matrix-column-headers.form-matrix-column_3:before {

  font-size: 1em;

  position: absolute;

  content:"Likelihood";

  font-weight: bold;

  margin-left: -5px;

  margin-top: -18px;

}

/*Ends here*/



/*Add top padding to column header - 3 Input Tables*/

#cid_25 > table > tbody > tr > th.form-matrix-headers, #cid_45 > table > tbody > tr > th.form-matrix-headers, #cid_46 > table > tbody > tr > th.form-matrix-headers {

padding-top: 30px !important;

}

/*Ends here*/

Here's the result:

Give it a try and let us know if you need any other help.

Hi Gilbert,

This is perfect!! Thank you very much! I'll try to apply it to the other forms I created.

Thanks :)

Marta

Hi Marta,

You're most welcome. I moved your other question to a new thread and helped you with that here.