정렬 테이블 헤더

내가 (그래서 열 제목의 숙박 스크롤시) 고정 행 머리글와 테이블을 만들려고하고, 나는 것을 달성 할 수 있었다하지만 지금은 테이블 헤더는에를 정렬되지 않은 아래 행 나는 그것에 대해서 jsfiddle을 만들었습니다. 현재 출력 같다 : 여기서정렬 테이블 헤더

enter image description here

샘플 추출 HTML이다.

<head> 
    <style> 
     table 
     { 
      /*background-color: #aaa;*/ 
      width: 800px; 
     } 
     tbody 
     { 
      /*background-color: #ddd;*/ 
      height: 200px; 
      width: 800px; 
      overflow: auto; 
     } 
     td 
     { 
     } 

     thead > tr, tbody 
     { 
      display: block; 
     } 
    </style> 
</head> 
    <body> 
    <div id="containerdiv" style="width: 800px"> 
     <table id="dynamictable"> 
      <thead> 
       <tr> 
        <th> 
         ID 
        </th> 
        <th> 
         Title 
        </th> 
        <th> 
         Media Title 
        </th> 
        <th> 
         Broadcast Time 
        </th> 
        <th> 
         Destination 
        </th> 
        <th> 
         Channel 
        </th> 
        <th> 
         Start Time 
        </th> 
        <th> 
         End Time 
        </th> 
       </tr> 
      </thead> 
      <tbody id="tablebody"> 
       <tr id="0"> 
        <td> 
         ID: 0 
        </td> 
        <td> 
         Some Content 
        </td> 
        <td> 
         Some more contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
       </tr> 
       <tr id="1"> 
        <td > 
         ID: 1 
        </td> 
        <td> 
         Some Content 
        </td> 
        <td> 
         Some more contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
       </tr> 
       <tr id="Tr1"> 
        <td> 
         ID: 1 
        </td> 
        <td> 
         Some Content 
        </td> 
        <td> 
         Some more contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</body>

출처

2013-09-03 user2711965

당신이 JQuery와 사용하려고 사용하는 경우 http://www.fixedheadertable.com/ – user1759572

글쎄, 처음에는 인라인 CSS 사용을 고집한다면 동일한 너비를 머리글은 아래 셀이 있습니다. – sbeliv01

가장 쉬운 방법은 고정 너비 열을 사용하는 것입니다. 각 열 유형에 고유 한'class'를 두어 CSS에 너비를 지정하십시오. – lurker

이 시도 :

HTML :

<body> 
    <div id="containerdiv" style="width: 800px"> 
     <table id="dynamictable"> 
       <tr> 
        <td style="width: 100px"> 
         ID 
        </td> 
        <td style="width: 300px"> 
         Title 
        </td> 
        <td style="width: 300px"> 
         Media Title 
        </td> 
        <td> 
         Broadcast Time 
        </td> 
        <td> 
         Destination 
        </td> 
        <td> 
         Channel 
        </td> 
        <td> 
         Start Time 
        </td> 
        <td> 
         End time 
        </td> 
       </tr> 
     </table> 
     <div class="scroll"> 
     <table id="tablebody"> 
       <tr id="0"> 
        <td style="width: 100px"> 
         ID: 0 
        </td> 
        <td style="width: 300px"> 
         Some Content 
        </td> 
        <td style="width: 300px"> 
         Some more contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
       </tr> 
       <tr id="1"> 
        <td style="width: 100px"> 
         ID: 1 
        </td> 
        <td style="width: 300px"> 
         Some Content 
        </td> 
        <td style="width: 300px"> 
         Some more contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
       </tr> 
       <tr id="Tr1"> 
        <td style="width: 100px"> 
         ID: 1 
        </td> 
        <td style="width: 300px"> 
         Some Content 
        </td> 
        <td style="width: 300px"> 
         Some more contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
        <td> 
         Some more contents contents contents 
        </td> 
       </tr> 
     </table> 
     </div> 
    </div> 
</body>

CSS :

table 
     { 
      /*background-color: #aaa;*/ 
      width: 780px; 
     } 

.scroll { 
    height: 200px; 
    width: 800px; 
    overflow: scroll; 
    overflow-x: hidden; 
    border: 1px solid #ccc; 
} 
#dynamictable { 
    font-weight: bold; 
} 
}

http://jsfiddle.net/zyjSf/4/

출처

2013-09-03 20:24:10

+1, 두 테이블과 스크롤 할 수있는 div가있는 것을 좋아합니다. 또한 td의 폭을 설정하면 동일하게 작동합니다. – user2711965

답장을 보내 주셔서 감사합니다. 헤더와 테이블 행 모두에 대해 고정 폭 열을 갖도록 코드를 수정했지만 이제는 두 테이블에 있으므로 완벽하게 작동합니다. – user2711965

감사합니다. 도움이 되었기 때문에 기쁩니다. :) –

표시하려면 : thead > tr, tbody을 표시하지 마십시오. 해당 줄을 제거하면 작동합니다.

기본적으로

, <tbody>이 display:table-row-group을 가지고 있으며, <tr>는 display:table-row있다. 기본값으로 유지하고 싶습니다.

출처

2013-09-03 20:08:05 andi

이 옳습니다. 당신은 TR과 TBODY를 강제로 '블록'스타일로 표시합니다. 테이블 렌더링 엔진이 제대로 작동하지 않습니다. –

하지만 고정 열 헤더가있는 것을 멈추지 않을 것입니다. 테이블에서 스크롤하면 상단의 열 머리글이 풀립니다. – user2711965

오, 내 잘못 - 잘라 내기 때문에 필자의 피들에 스크롤 막대가 표시되지 않았습니다. 내 화면. 무슨 뜻인지 알 겠어. 내가 고쳐 줄게. – andi

td 및 th 너비를 모두 설정해야하는 것처럼 보입니다. 그렇지 않으면 테이블 레이아웃 엔진이 중단됩니다.

편집 : 시도하십시오 fiddle.

출처

2013-09-03 20:24:01 beautifulcoder

정렬 테이블 헤더

답변

관련 문제