oTree Forum >

Align table from left to right

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

Write a reply

Set forum username