爲什麼列沒有在我的固定標題，滾動表中對齊？

我有一個固定標題和滾動正文的表格。沒有列正確排列。爲什麼列沒有在我的固定標題，滾動表中對齊？

這是我在谷歌瀏覽器看到：

這截屏是我準備這個最小的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

問題是使用display:block作爲tr，thead & tbody。

訪問http://www.cssplay.co.uk/menu/tablescroll.html的方法

來源

2011-08-29 01:05:22

我以前訪問過那個頁面，你有什麼建議我在我的CSS中修復？我應該改變它而不是塊？ –

我不會建議修復你的CSS，我會建議使用經過測試的解決方案，例如鏈接的一個。可滾動桌子並不那麼容易，Stu Nicholls如果很容易就不會花時間在桌面上。 –

@ Dr.Molle正確。刪除該風格，它應該工作（因爲它將默認爲：display：table-row;「 –

當你做了一個錶行爲像一個div（希望因爲你被迫），你也可以指定類細胞，並用CSS設置寬度，確保列線up：

<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

爲什麼列沒有在我的固定標題，滾動表中對齊？

回答

相關問題