Wednesday, November 5, 2014

Make html tables fixed size with css

My Djangp app output data like this in the template:

{% for mydata in mydataset %}
<table class="mytable">
    <tr>
          <th style="width=50%;">Column 1</th>
          <th style="width=50%;">Column 2</th>
    </tr>
{% for data in mydata %}
    <tr>
          <td>{{ data.attr1 }}</td>
          <td>{{ data.attr2 }}</td>
    </tr>
 {% endfor %}
</table>
{% endfor %}

The thing is I want to make all my html tables keep a certain size even when the content inside the cells may vary. Here is the trick I'm using:

table.mytable {
    table-layout: fixed;
}