#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!