请教js如何实现让table的表头的高度固定？

rt

解决方案 »

  1.   

    方法一:动态创建<html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
            <META http-equiv="Content-Style-Type" content="text/css">
            <SCRIPT language="JavaScript" src="js/mytool.js"></SCRIPT>
        </head>
        <script language=javascript>
            var TH_HEIGHT="20px";
            var THCOLOR="#ffff99";
            var THBGCOLOR= "#ccecff";
            var NEW_COLOR="#ffffff";
            var lastObj;
            function createEventTable() {
                var newRow,col1,col2,col3;
                var ln = document.getElementById("tb1").rows.length;
                if( ln > 0){
                    for(var i=0; i<ln; i++){
                        if(document.getElementById("tb1").rows.length <= 0)break;
                        document.getElementById("tb1").deleteRow(-1);
                    }
                }
                for(var colno=0; colno<15; colno++){    
                    newRow = document.getElementById("tb1").insertRow(-1);
                    newRow.id = 'r'+colno;
                    document.getElementById("r"+colno).height = TH_HEIGHT;
                    document.getElementById("r"+colno).bgColor = THCOLOR;
                    col1=newRow.insertCell(0);
                    col2=newRow.insertCell(1);
                    col3=newRow.insertCell(2);
                    col1.id="col1"+colno
                    col2.id = "col2"+colno;
                    col3.id = "col3"+colno;
                    col1.innerText = "列一"+colno;
                    col2.innerText = "列二"+colno;
                    col3.innerText = "列三"+colno;
            
                }
            }        window.onload=function(){
                createEventTable();
            }
        </script>
        <body >
            <TABLE  cellSpacing="0" borderColorDark="black" cellPadding="1" borderColorLight="black"  border="1">
                <thead>
                <COLGROUP>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                <TR  bgColor="#ccecff" id="sss">
                    <TH >列1</TH>
                    <TH  >列2</TH>
                    <TH  >列3</TH>
                </TR>
            </thead>
            <TBODY id="tb1">
            </TBODY>
        </TABLE></body>
    </html>
      

  2.   

    方法二<html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
            <META http-equiv="Content-Style-Type" content="text/css">
        </head>
         <script language=javascript>
                var t, n, c;
                window.onload=function(){
                    t = document.getElementById("tb");
                        t.rows[0].style.height="50px"  //在这里设置高度
           
                }
            </script>
        <body >
                   <table id="tb" border=1px gray>
                <tr><th>11</th><th>12</th><th>13</th><th>14</th><th>15</th></th>
                <tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
                <tr><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr>
                <tr><td>41</td><td>42</td><td>43</td><td>44</td><td>45</td></tr>
                <tr><td>51</td><td>52</td><td>53</td><td>54</td><td>55</td></tr>
            </table>    </body>
    </html>
      

  3.   

    方法三,适用于table中所有th标签<html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
            <META http-equiv="Content-Style-Type" content="text/css">
        </head>
        <script language=javascript>
            var t, n, c;
            window.onload=function(){
                t = document.getElementById("tb");
                var tr = tb.getElementsByTagName("th");
                for(var i=0;i<tr.length;i++){
                    tr[i].style.height="50px"
                }
                //td.rows[0].style.height="50px"  //在这里设置高度
           
            }
        </script>
        <body >
            <table id="tb" border=1px gray>
                <tr><th>11</th><th>12</th><th>13</th><th>14</th><th>15</th></th>
                <tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
                <tr><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr>
                <tr><td>41</td><td>42</td><td>43</td><td>44</td><td>45</td></tr>
                <tr><td>51</td><td>52</td><td>53</td><td>54</td><td>55</td></tr>
            </table>    </body>
    </html>