给Table加上下左右滚动条的问题...

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

你的头部和你的数据部分分开好了。头部用定好宽度间隔。然后下面用个带滚动条的div，样式设置设置好就行了。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <style type="text/css">
        .td {
            border: 1px red solid
        }        .table {
            border-collapse: collapse;
            border: 1px red solid
        }
    </style>
    <script type="text/javascript">        var data = ['英语','化学'];
        function flush() {
            var div = document.getElementById('div');
            //表头部分
            var content = '<table class=table>';
            content += '<tr>';
            content += '<td class=td rowspan="2">学科</td>';
            content += '<td class=td rowspan="2">性别</td>';
            content += '<td class=td colspan="2">学校</td>';
            content += '</tr>';
            content += '<tr>';
            content += '<td class=td>班级１</td>';
            content += '<td class=td>班级２</td>';
            content += '</tr>';            for (var i = 0; i < data.length; i++) {
                content += '<tr>';
                content += '<td class=td rowspan="2">'+data[i]+'</td>';
                content += '<td class=td>男</td>';
                content += '<td class=td>88</td>';
                content += '<td class=td>87</td>';
                content += '</tr>';
                content += '<tr>';
                content += '<td class=td>女</td>';
                content += '<td class=td>88</td>';
                content += '<td class=td>87</td>';
                content += '</tr>';
            }
            content += '</table>';            div.innerHTML = content;
        }
    </script>
    <title></title>
</head>
<body><div id="div"></div>
<input type="button" onclick="flush()" value="showTable"/></body>
</html>数据上的结构很简单，自己写吧！
补上吧！<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <style type="text/css">
        .td {
            border: 1px red solid
        }        .table {
            border-collapse: collapse;
            border: 1px red solid
        }
    </style>
    <script type="text/javascript">        var data = [{title:'英语',nan:[88,87],nv:[78,77]},{title:'化学',nan:[98,87],nv:[98,77]}];
        function flush() {
            var div = document.getElementById('div');
            //表头部分
            var content = '<table class=table>';
            content += '<tr>';
            content += '<td class=td rowspan="2">学科</td>';
            content += '<td class=td rowspan="2">性别</td>';
            content += '<td class=td colspan="2">学校</td>';
            content += '</tr>';
            content += '<tr>';
            content += '<td class=td>班级１</td>';
            content += '<td class=td>班级２</td>';
            content += '</tr>';            for (var i = 0; i < data.length; i++) {
                content += '<tr>';
                content += '<td class=td rowspan="2">'+data[i].title+'</td>';
                content += '<td class=td>男</td>';
                content += '<td class=td>'+data[i].nan[0]+'</td>';
                content += '<td class=td>'+data[i].nan[1]+'</td>';
                content += '</tr>';
                content += '<tr>';
                content += '<td class=td>女</td>';
                content += '<td class=td>'+data[i].nv[0]+'</td>';
                content += '<td class=td>'+data[i].nv[1]+'</td>';
                content += '</tr>';
            }
            content += '</table>';            div.innerHTML = content;
        }
    </script>
    <title></title>
</head>
<body><div id="div"></div>
<input type="button" onclick="flush()" value="showTable"/></body>
</html>