고정 된 머리글, 스크롤 테이블에 열이 정렬되지 않는 이유는 무엇입니까?

고정 된 머리글과 스크롤링 본문이있는 테이블이 있습니다. 어떤 열도 제대로 정렬되어 있지 않습니다. 여기고정 된 머리글, 스크롤 테이블에 열이 정렬되지 않는 이유는 무엇입니까?

내가 구글 크롬에서 볼 것입니다 : 스크린 샷은 내가 준비한이 최소한의 HTML 문서입니다

그건 :

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
html, body 
{ 
    margin: 0; 
    padding: 0; 
    font-family: Tahoma, Geneva, sans-serif; 
    background-color: #888888; 
} 

.white_box 
{ 
    border: 1px solid black; 
    background-color: white; 
} 

.round_corners 
{ 
    padding: 20px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
} 

.shadow 
{ 
    -moz-box-shadow: 2px 2px 3px #000; 
    -webkit-box-shadow: 2px 2px 3px #000; 
    box-shadow: 2px 2px 3px #000; 
} 

.aligncenter 
{ 
    margin-left: auto; 
    margin-right: auto; 
} 

#editpage 
{ 
    margin-top: 1em; 
    margin-left: 1em; 
    margin-right: 1em; 
} 

#updatesdisplay 
{ 
    width: 100%; 
    border-collapse: collapse; 
} 

#updatesdisplay tbody 
{ 
    display: block; 
    max-height: 500px; 
    width: 100%; 
    overflow-y: auto; 
} 

#updatesdisplay tr, #updatesdisplay thead 
{ 
    display: block; 
    width: 100%; 
} 

#updatesdisplay th 
{ 
    font-weight: bold; 
    font-size: 10pt; 
    border: 1px solid #AAAAAA; 
    padding: 3px; 
    background: rgb(238,238,238); /* Old browsers */ 
    background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(196,196,196,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(196,196,196,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(196,196,196,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(196,196,196,1) 100%); /* Opera11.10+ */ 
    background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(196,196,196,1) 100%); /* IE10+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#c4c4c4',GradientType=0); /* IE6-9 */ 
    background: linear-gradient(top, rgba(238,238,238,1) 0%,rgba(196,196,196,1) 100%); /* W3C */ 
} 

#updatesdisplay tbody tr:nth-child(even) 
{ 
    background-color: #CCCCCC; 
} 

#updatesdisplay tbody tr:hover 
{ 
    background-color: #DDDDDD; 
} 

#updatesdisplay tbody tr.selected 
{ 
    background-color: lightblue; 
} 

#updatesdisplay td 
{ 
    cursor: pointer; 
    padding: 5px; 
    border: 0; 
} 

.update-description 
{ 
    max-width: 150px; 
} 
    </style> 
</head> 
<body> 
    <div id="editpage" class="white_box shadow aligncenter round_corners"> 
     <table id="updatesdisplay" cellpadding="0" cellspacing="0" border="0"> 
      <thead> 
       <tr> 
        <th><input type="checkbox" id="select-all"></th> <!-- Checkbox --> 
        <th>Application Name</th> 
        <th>Version</th> 
        <th>Description</th> 
        <th>Date Created</th> 
        <th>Download URL</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr><td><input type="checkbox" name="sel1"></td><td class="update-appname">test</td><td class="update-version">0.5.0</td><td class="update-description">This is a simple test update designed to test the update system.</td><td class="update-created">2011-08-28 18:17:50</td><td class="update-download"><a href="http://localhost:8080/py/download?file=BeautifulSoup-3.1.0.1.tar.gz">http://sunjay.ca/test/download?file=BeautifulSoup-3.1.0.1.tar.gz</a></td></tr> 
       <tr><td><input type="checkbox" name="sel2"></td><td class="update-appname">test</td><td class="update-version">0.5.1</td><td class="update-description">- Bug fixes</td><td class="update-created">2011-08-28 20:15:04</td><td class="update-download"><a href="http://sunjay.ca/download/test-0.5.1">http://sunjay.ca/download/test-0.5.1</a></td></tr> 
       <tr><td><input type="checkbox" name="sel3"></td><td class="update-appname">test</td><td class="update-version">1.5.3</td><td class="update-description">- Bug fixes</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.5.3">http://www.sunjay.ca/up/test-1.5.3</a></td></tr> 
       <tr><td><input type="checkbox" name="sel4"></td><td class="update-appname">test</td><td class="update-version">1.5.4</td><td class="update-description">- Bug fixes<br>- General Speedups</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.5.4">http://www.sunjay.ca/up/test-1.5.4</a></td></tr> 
       <tr><td><input type="checkbox" name="sel5"></td><td class="update-appname">test</td><td class="update-version">1.5.5</td><td class="update-description">- Bug fixes</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.5.5">http://www.sunjay.ca/up/test-1.5.5</a></td></tr> 
       <tr><td><input type="checkbox" name="sel6"></td><td class="update-appname">test</td><td class="update-version">1.5.6</td><td class="update-description">- Bug fixes<br>- General Speedups</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.5.6">http://www.sunjay.ca/up/test-1.5.6</a></td></tr> 
       <tr><td><input type="checkbox" name="sel7"></td><td class="update-appname">test</td><td class="update-version">1.5.7</td><td class="update-description">- Bug fixes</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.5.7">http://www.sunjay.ca/up/test-1.5.7</a></td></tr> 
       <tr><td><input type="checkbox" name="sel8"></td><td class="update-appname">test</td><td class="update-version">1.5.8</td><td class="update-description">- Bug fixes<br>- General Speedups</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.5.8">http://www.sunjay.ca/up/test-1.5.8</a></td></tr> 
       <tr><td><input type="checkbox" name="sel9"></td><td class="update-appname">test</td><td class="update-version">1.5.9</td><td class="update-description">- Bug fixes</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.5.9">http://www.sunjay.ca/up/test-1.5.9</a></td></tr> 
       <tr><td><input type="checkbox" name="sel10"></td><td class="update-appname">test</td><td class="update-version">1.6.0</td><td class="update-description">- Bug fixes<br>- General Speedups</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.6.0">http://www.sunjay.ca/up/test-1.6.0</a></td></tr> 
       <tr><td><input type="checkbox" name="sel11"></td><td class="update-appname">test</td><td class="update-version">1.6.1</td><td class="update-description">- Bug fixes</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.6.1">http://www.sunjay.ca/up/test-1.6.1</a></td></tr> 
       <tr><td><input type="checkbox" name="sel12"></td><td class="update-appname">test</td><td class="update-version">1.6.2</td><td class="update-description">- Bug fixes<br>- General Speedups</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.6.2">http://www.sunjay.ca/up/test-1.6.2</a></td></tr> 
       <tr><td><input type="checkbox" name="sel13"></td><td class="update-appname">test</td><td class="update-version">1.6.3</td><td class="update-description">- Bug fixes</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.6.3">http://www.sunjay.ca/up/test-1.6.3</a></td></tr> 
       <tr><td><input type="checkbox" name="sel14"></td><td class="update-appname">test</td><td class="update-version">1.6.4</td><td class="update-description">- Bug fixes<br>- General Speedups</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.6.4">http://www.sunjay.ca/up/test-1.6.4</a></td></tr> 
       <tr><td><input type="checkbox" name="sel15"></td><td class="update-appname">test</td><td class="update-version">1.6.5</td><td class="update-description">- Bug fixes</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.6.5">http://www.sunjay.ca/up/test-1.6.5</a></td></tr> 
      </tbody> 
     </table> 
    </div> 
</body> 
</html>

나 잘못이 무엇인지 알아내는 데 도움이 바랍니다. 감사!

출처

2011-08-29 Sunjay Varma

문제는 tr, thead에 display:block을 사용하는 것입니다. & tbody. 대한

방문 http://www.cssplay.co.uk/menu/tablescroll.html는 테이블이 (당신이 강제로 희망 때문에) 사업부, 당신은 또한 세포에 클래스를 할당하고 열 라인을 보장하기 위해 CSS와 폭을 설정할 수 있습니다처럼 행동했습니다 때마다

출처

2011-08-29 01:05:22

이전에 해당 페이지를 방문한 적이 있습니다. 내 CSS에서 어떻게 수정하겠습니까? 블록 대신에 무엇을 변경해야합니까? –

CSS를 수정하지 않으려 고합니다. 테스트 된 솔루션을 사용하는 것이 좋습니다. 연결된 하나. 스크롤 테이블이 쉽지 않은 경우 Stu Nicholls는 쉬울 경우 시간을 낭비하지 않습니다. –

@ Dr.Molle이 맞습니다. 해당 스타일을 제거하면 정상적으로 작동합니다 (display : table-row; " –

접근 최대 :

<style type="text/css"> 
    td.col1 { width: 5em;} 
    td.col2 { width: 7em;} 
</style> 

<table> 
    <tr> 
    <td class="col1">your content</td> 
    <td class="col2">your content</td> 
    </tr> 
</table>

출처

2013-04-03 21:07:38 Deborah

고정 된 머리글, 스크롤 테이블에 열이 정렬되지 않는 이유는 무엇입니까?

답변

관련 문제