可滚动的正文表

Question

关于如何使HTML表的正文可滚动的文章很多。

不幸的是，我的CSS技能似乎很弱，因为尽管发表了所有这些文章，我对此还是感到很困难。

我有一个将动态填充的表。最初，它可能显示为带有一些空白行。一切工作正常，只是担心数据集可能很大，因此要求桌子具有固定的高度并且可以y滚动。

HTML如下所示。我已经添加了许多空白行，而它们只是在布局中。

  <table id="output" class="gridtable">
        <thead>
            <tr >
                <th></th>
                <th>AA</th>
                <th>BB</th>
                <th>CC</th>
                <th>DD</th>
                <th>EE</th>
            </tr>
        </thead>
        <tbody >
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        </tbody>
    </table>

这是我正在尝试的当前CSS代码。 我希望表格的宽度随着窗口的变化而动态地保持在80％。

table.gridtable thead { 
    display: block; 
} 
table.gridtable thead tr{ 
    width: 100%; 
} 
table.gridtable tbody tr{ 
    width: 97%; 
} 
table.gridtable tbody { 
    display: block; 
    height: 200px; 
    overflow-y: auto; 
    overflow-x: hidden; 
    width: 100%;
} 
table.gridtable { 
    border-spacing: 0; 
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    width: 80%;
    margin-left:auto; 
    margin-right:auto;
} 
table.gridtable td { 
    border:1px solid #000000;
    padding: 2px 4px; 
    height: 20px;
    width: 16.6666%;
} 
table.gridtable th { 
    background: #f2f2f2; 
    border-bottom: 1px solid #aaa; 
    border-top: 1px solid #aaa; 
    border-width: 1px;
    border-color: #666666;
    text-align: center; 
    padding: 8px 4px;  
    height: 20px;
    width: 16.6666%;
} 

这是它的外观。我希望thead与tbody行对齐。还希望列之间的间隔更好。

Answer 1

也许这段代码可以为您提供帮助。

我注意到您覆盖了一些额外的代码，不需要在点之前写元素，只需要类，并且边框可以具有格式为border: width style color的简写。

.gridtable {
    border-spacing: 0;
    border-collapse: collapse;
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    color: #333333;
    border: 1px solid #666;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: table;
    box-sizing: border-box;
}

.gridtable thead {
    display: table;
    min-width: 100%;
    background: #f2f2f2;
    border-bottom: 1px solid #666;
    border-top: 1px solid #666;
    text-align: center;
}

.gridtable th {
    padding: 8px 4px;
    width: 16.6%;
}

.gridtable tbody {
    height: 200px;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
}

.gridtable tr {
    display: table;
    width: 100%;
    min-height: 20px;
}

.gridtable td {
    border: 1px solid #000000;
    padding: 2px 4px;
    width: 16.6%;
    height: 20px;
}

<table id="output" class="gridtable">
    <thead>
        <tr>
            <th>AA</th>
            <th>BB</th>
            <th>CC</th>
            <th>DD</th>
            <th>EE</th>
            <th>FF</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>