HTML自适应表格

<link type="text/css" rel="stylesheet" href="../../static/demo.css">
<!--<style>-->
<!--    @import url(demo.css);-->
<!--</style>-->
<input id="text" onkeydown="if(event.keyCode==13) {test()}" value="请输入工号，以逗号拆分（双击清空输入框）" style="width:161px;" ondblclick="this.value=''"/>
<input id="result" style="width:111px;height:41px" disabled="disabled" value={{ jobnumbers_result }}>
<form id="csrf" action="/xadmin/jobnumbers_search/" method="get">{% csrf_token %}
</form>
<script>
	function test(){
		var myform=$('#csrf'); //得到form对象
        var tmpInput=$("<input type='text' name='search_key'/>");
        tmpInput.attr("value", document.getElementById("text").value);
        myform.append(tmpInput);
        myform.submit();
	}

</script>
<div style="width:expression(window.screen.width - 300);height:600px;overflow-y:scroll;overflow-x:none;">
    <table border="1">
        {% for i in table_header %}
            <tr>
                {% for j in i %}
                    <th>{{j}}</th>
                {% endfor %}
            </tr>
        {% endfor %}
        {% for i in data %}
            <tr>
                {% for j in i %}
                    <th>{{j}}</th>
                {% endfor %}
            </tr>
        {% endfor %}

    </table>
</div>

table{
    width: 100%;
    border-collapse: collapse;
}

table caption{
    font-size: 2em;
    font-weight: bold;
    margin: 1em 0;
}

th,td{
    border: 1px solid #999;
    text-align: center;
    padding: 20px 0;
}

table thead tr{
    background-color: #008c8c;
    color: #fff;
}

table tbody tr:nth-child(odd){
    background-color: #eee;
}

table tbody tr:hover{
    background-color: #ccc;
}

table tbody tr td:first-child{
    color: #f40;
}

table tfoot tr td{
    text-align: right;
    padding-right: 20px;
}