Django/html table: Description inside header row shifts to the right

I seem too be having a strange problem.

I have a django app that can crate a note from a form. All of these notes开发者_Python百科 that are entered from this form are stored in a table list. Like so.

<div style="overflow:auto; height:100px; width:721px; padding:12px; border:1px solid #C0C0C0">
{% for note in notes %}
        <table style="border:1px solid #C0C0C0">
        <tr><th >{{note.datetime}} {{note.datetime.time}} - Posted by {{note.user}}</th></tr>
        <tr><td>{{ note.note}}</td></tr>
        </table>
{% endfor %}
</div>

As you can see, the first row will print the username, date and time. The second row produces that note. The problem is if I crate a note that has a very long length, (many words) the first row starts moving more to the right. I do not want this to happen. How can I stop the header row to stay on the left, no matter how many words & letters you enter for notes?

By default a th will center it's text. So you should left align it instead:

<tr><th style="text-align: left">{{note.datetime}} {{note.datetime.time}} - Posted by {{note.user}}</th></tr>

Of course I am also obliged to tell you that adding style attributes to tags like this should be avoided. Really your css should exist in a separate file, but obviously that doesn't help with your existing problem.