#1 by galbitton
Hi everyone, I'm encounter a difficulty with aligning a table from left to right. See attachment and the code I use below. Any help will be much appreciated! Code: <table class="table" align="center" style="width:100%"> <tr > <th> <br>1 = Not at all important<br> </th> <th> <br>Slightly important<br> </th> <th> <br>3 = Important<br> </th> <th> <br>Fairly important<br> </th> <th> <br>5 = Very important<br> </th> <th> <br>Don’t know<br> </th> <th></th> </tr> {% for field in form %} <tr> {% for choice in field %} <td align="center" >{{ choice }}</td> {% endfor %} <td align="left" style="min-width:10px">{{ field.label }}</td> </tr> {% endfor %} </table> <style> tr:nth-child(even) {background-color: #f9f9f9;} th { text-align:left; width: 10%; } input[type="radio"]{margin-left:-5.5px} </style>
#2
by
Furuneko
What is that you would like to align? Cheers
#3 by galbitton
As you can see in the screen shot I attached, the fields "Nation, Family, Tradition, etc." are on the right side of the table. I want them to be on the left. Thanks!
#4
by
BonnEconLab
(edited )
Moving <td align="left" style="min-width:10px">{{ field.label }}</td> in front of {% for choice in field %} should do the job: {% for field in form %} <tr> <td align="left" style="min-width:10px">{{ field.label }}</td> {% for choice in field %} <td align="center" >{{ choice }}</td> {% endfor %} </tr> {% endfor %} Of course, you’ll also have to change the order of the column headers accordingly: <th></th> <th> <br>1 = Not at all important<br> </th> <th> <br>Slightly important<br> </th> <th> <br>3 = Important<br> </th> <th> <br>Fairly important<br> </th> <th> <br>5 = Very important<br> </th> <th> <br>Don’t know<br> </th>
#5 by galbitton
It works perfectly! Thank you so much!