css - 模态弹出窗口不显示滚动条

Question

我有一个不显示垂直滚动条的模式弹出窗口。

代码:

<div id="divConfirmBulkRenewal" class="ModalPopup" runat="server" style="display: none">
        <asp:Panel ID="PanelBCR" runat="server" Style="width: 450px; cursor: move; background-color: #008b9c; border: solid 0px Gray; color: Black; height: 5px" Visible="false">
        </asp:Panel>
        <asp:UpdatePanel ID="updatePanel2" runat="server">
            <ContentTemplate>
                <table class="tableContainer">
                    <thead class="fixedHeader">
                        <tr>
                            <th>
                                <asp:Label ID="lblModalBulkRenewalTitle" runat="server" SkinID="noindent"></asp:Label>
                            </th>
                        </tr>
                    </thead>
                    <tbody class="scrollContent">
                        <tr>
                            <td>
                                <table>
                                    <tr>
                                        <td>Please find below the status of bulk renewal of licence(s)?</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <table align="center">
                                                <tr>
                                                    <td><b>
                                                        <asp:Label ID="lblBulkRenewal" runat="server" SkinID="noindent" EnableViewState="false" Visible="false"></asp:Label></b></td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td align="center" valign="bottom">
                                <asp:Button ID="btnBulkRenewalCancel" runat="server" Text="Close" OnClick="btnBulkRenewalCancel_Click" CausesValidation="false" />&nbsp;&nbsp;&nbsp;
                            </td>
                        </tr>
                    </tbody>
                </table>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

CSS:

    div.tableContainer {
    clear: both;
    border: 1px solid #963;
    height: 50px; /* html>body tbody.scrollContent height plus 15px for the header */
    overflow: auto;
    width: 516px; /* Remember to leave 16px for the scrollbar! */
    white-space:nowrap;
}

html>body tbody.scrollContent {
    display: block;
    height: 35px;
    overflow-y: scroll;
    width: 100%
}

html>body thead.fixedHeader tr {
    display: block
}

html>body thead.fixedHeader th { /* TH 1 */
    width: 516px;
    padding: 0 0 0 3px;
    border-bottom:1px solid #008899;
    background-color: #008899;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 100%;
    font-weight: bold;
    color: White;
    vertical-align:bottom;
    height:15px;
    line-height:15px;
}

html>body tbody.scrollContent td { /* TD 1 */
    width: 516px;
}

图片:

Answer 1

我通过将表格包装在一个 div 中解决了这个问题:

HTML 看起来像这样:

<div id="table-wrapper">
                    <div id="table-scroll">
                        <table>
                            <thead>
                                <tr>
                                    <th>
                                        <asp:Label ID="lblModalBulkRenewalTitle" runat="server" SkinID="noindent"></asp:Label></th>
                                </tr>
                            </thead>
                            <tbody>

                                <tr>
                                    <td>Please find below the status of bulk renewal of licence(s)?</td>
                                </tr>
                                <tr>
                                    <td><b>
                                        <asp:Label ID="lblBulkRenewal" runat="server" SkinID="noindent" EnableViewState="false" Visible="false"></asp:Label></b></td>
                                </tr>
                                <tr>
                                    <td align="center" valign="bottom">
                                        <asp:Button ID="btnBulkRenewalCancel" runat="server" Text="Close" OnClick="btnBulkRenewalCancel_Click" CausesValidation="false" />&nbsp;&nbsp;&nbsp;
                                    </td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>

CSS:

#table-wrapper {
    position:relative;
}

#table-scroll {
    width: 532px;
    height: 155px;
    overflow-y:auto;  
    margin-top:20px;
    overflow-x: hidden;
}

#table-wrapper table {
    width:100%;
    padding: 5px;
}

#table-wrapper table thead th {
    position:absolute;   
    top:-20px;
    z-index:2;
    width:100%;
    padding: 0 0 0 3px;
    border-bottom:1px solid #008899;
    background-color: #008899;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 100%;
    font-weight: bold;
    color: White;
    vertical-align:bottom;
    height:20px;
    line-height:15px;
}

#table-wrapper table tbody {
    display: block;
    width: 532px;
    margin-bottom: 20px;
}

#table-wrapper table tbody tr td {
    width:516px;
    padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
}