동적으로 생성 된 테이블을 div에 삽입하는 문제

나는 동적으로 테이블의 행을 생성하고 있습니다. 테이블 헤더는 정적/상수입니다. 나는 이것을 마침내 페이지의 div에 쓰고 있습니다.동적으로 생성 된 테이블을 div에 삽입하는 문제

div에는 가로 스크롤과 세로 스크롤이 있습니다. 내 문제는 이것입니다 : 만약 내가 100 행이 있다고 말하면 헤더/테이블 컬럼을 볼 수 없습니다. 나는 헤더/컬럼을 볼 수있는 엑셀의 고정 창과 같이 만들고 싶습니다.

헤더/열을 행에서 분리하려고 시도했지만 문제가 광범위합니다. 즉, 행 td 크기가 헤더와 일치하지 않습니다. 여기에 내 코드 (샘플 코드)가있다 :

나는 IE7과 FF에서 작동되도록하고 싶다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    <html> 
    <head> 
     <title> Some Page </title> 
     <meta name="Author" content=""> 
     <meta name="Keywords" content=""> 
     <meta name="Description" content=""> 
    </head> 

    <body> 
     <div id="dataDiv" style="white-space:nowrap; overflow-y:scroll; height:330px;overflow: scrollbars-vertical;overflow-x:scroll; width:100%;overflow: scrollbars-horizontal;"> 
    </body> 
    </html> 


    <script> 


    function ProcessResponse(ajaxResponseData) 
    { 

     var dataList = ajaxResponseData.somDataList; 



     if(dataList != null) 
     { 

      var rowData = "<table border='1' width=1200px>"; 
      rowData += "<tr>"   
       + "<td colspan='6'><b>Header1</b></td>" 
       + "<td colspan='4'><b>Header2</b></td>" 
       + "<td colspan='4'><b>Header3</b></td>" 
       + "<td colspan='4'><b>Header4</b></td>" 
       + "<td colspan='4'><b>Header5</b></td>" 
       + "<td colspan='4'><b>Header6</b></td>" 
       + "<td colspan='4'><b>Header7</b></td>" 
       + "<td colspan='4'><b>Header8</b></td>" 
       + "<td colspan='4'><b>Header9</b></td>" 
       + "<td colspan='4'><b>Header10</b></td>" 
       + "<td colspan='4'><b>Header11</b></td>" 
       + "<td colspan='4'><b>Header12</b></td>" 
       + "<td colspan='4'><b>Header13</b></td>" 
       +"</tr>"; 




      for(var i=0;i<dataList.length;i++) 
      { 
       var someRowData=new Object(); 
       someRowData = dataList[i]; 


       rowData+="<tr>"    
       +"<td colspan='6'>" 
       +someRowData.Header1_data+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" 
       +"</td><td colspan='4'>" 
       +someRowData.Header2_data 
       +"</td><td colspan='4'>" 
       +someRowData.Header3_data 
       +"</td><td colspan='4'>" 
       +someRowData.Header4_data 
       +"</td>" 
       +"</td><td colspan='4'>" 
       +someRowData.Header5_data 
       +"</td>" 
       +"</td><td colspan='4'>" 
       +someRowData.Header6_data 
       +"</td>" 
       +"</td><td colspan='4'>" 
       +someRowData.Header7_data 
       +"</td>" 
       +"</td><td colspan='4'>" 
       +someRowData.Header8_data 
       +"</td>" 
       +"</td><td colspan='4'>" 
       +someRowData.Header9_data 
       +"</td>" 
       +"</td><td colspan='4'>" 
       +someRowData.Header10_data 
       +"</td>" 
       +"</td><td colspan='4'>" 
       +someRowData.Header11_data 
       +"</td>" 
       +"</td><td colspan='4'>" 
       +someRowData.Header12_data 
       +"</td>" 
       +"</td><td colspan='4'>" 
       +someRowData.Header13_data 
       +"</tr>"; 
      } 
      rowData+="</table>"; 


      var dataDiv=document.getElementbyId("dataDiv"); 

      if(dataList.length == 0) 
      { 

       dataDiv.innerHTML=""; 
      } 
      else  
      {   
       dataDiv.innerHTML=rowData; 
      } 

     } 

    } 
    </script>

도와주세요. 귀하의 도움을 주시면 감사하겠습니다. 감사합니다

출처

2011-12-29 Nomad

당신보다는 tbody 요소에 overflow: auto;을 설정해야 할 일은 당신의 div (th 요소는 thead 요소에 보관하십시오. 이것은 파이어 폭스 (어쩌면 오페라뿐만 아니라 확실하지 않은 것)를 제외하고는 (일부 조정/해킹 없이는) 작동하지 않을 것이다. @smnbss가 제공하는 링크를 확인하십시오. 아마도 해결해야합니다. 가장 큰 문제는 모든 브라우저에서 작동하도록하려면 모든 셀에 고정 너비를 설정해야한다는 것입니다.

출처

2011-12-29 23:27:42 powerbuoy

당신의 대답에 감사드립니다. – Nomad

당신은

이 한 번 봐 가지고 CSS를 조금 플레이해야 :

http://www.imaputz.com/cssStuff/bigFourVersion.html

출처

2011-12-29 23:25:37 smnbss

어떻게 사용할 수 있습니까? – Nomad

@ 노매드 오른쪽 클릭하면 소스를 볼 수 있습니다. 여기에 순수한 CSS 표가 있습니다. http://jsfiddle.net/dKEy5/ –

@Tom Ingram 덕분에 셀이 헤더와 함께 정렬되지 않았습니다. 10 개의 헤더를 갖고 싶다면 어떻게해야합니까? – Nomad

동적으로 생성 된 테이블을 div에 삽입하는 문제

답변

관련 문제