为什么列没有在我的固定标题，滚动表中对齐？

问题描述 投票：6回答：3

我有一个固定标题和滚动体的表。没有列正确排列。

以下是我在Google Chrome中看到的内容：enter image description here

那个屏幕截图是我准备的这个最小的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>

请帮我弄清楚出了什么问题。谢谢！

html css width css-tables
3个回答
6
投票

问题是使用display:block for tr，thead＆tbody。

访问http://www.cssplay.co.uk/menu/tablescroll.html了解方法

1
投票

每当你使一个表行为像div（希望因为你被迫）时，你也可以为单元格分配类并用CSS设置宽度以确保列对齐：

<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>
1
投票

只需擦除两行“display：block;”即可解决问题。

如果想要使一行不可见，仍然可以通过将显示设置为“无”来实现，并且可以通过将显示设置为“”（空字符串）使其再次可见。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.