我只想在我的桌子上显示3个表行,直到我悬停,然后我希望它全部显示

时间:2014-02-20 12:49:45

标签: html css asp-classic html-table hover

我一直在为这个问题寻找解决方案,到目前为止还没有任何效果。

我只想在我的桌子上显示3个表行,直到我将其悬停,然后我只想让它全部显示:

我的HTML:

<div id="CancelTable">
    <table id="tablecancel" width="800px;">
        <colgroup>
            <col span="1" style="width: 850px;" />
            <col span="1" style="width: 850px;" />
        </colgroup>
        <tr>
            <td>Start Date to End Date</td>
            <td>Cancel</td>
            <td>Accept(True)/Decline(False)</td>
        </tr>
        <% Set objDBConn=S erver.CreateObject( "ADODB.Connection") objDBConn.Open "Provider=sqloledb;Data Source=*******;Initial Catalog=******;User ID=Byron;Password=Pass;" Set objDBCommand=S erver.CreateObject( "ADODB.Command") objDBCommand.ActiveConnection=o bjDBConn objDBCommand.CommandText="****" objDBCommand.CommandType=a dCmdStoredProc Set objDBRS=S erver.CreateObject( "ADODB.RecordSet") objDBRS.open objDBCommand,,adOpenForwardOnly Do until objDBRS.eof %>
            <tr>
                <td class="Column4Table">(
                    <%response.Write(objDBRS(1))%>) to (
                        <%response.Write(objDBRS(2))%>)</td>
                <td class="Column4Table">
                    <input type="checkbox" name="all">
                </td>
                <td class="Column4Table">
                    <%response.Write(objDBRS(3))%>
                </td>
            </tr>
            <% a=a+1 %>
                <%objDBRS.movenext Loop Set objDBCommand=nothing objDBConn.Close Set objDBConn=nothing %>
    </table>
    <div id="SelectAllSubmit">
        <div id="SelectAll"> <strong><i>Submit</i></strong>

        </div>
        <div id="Div1">
            <div id="p6"><span id="Span1">Select all</span>

            </div>
            <input type="checkbox" onclick="toggle(this)" />
            <br />
            <div id="buttonsubmit6" onclick="RowRemove();"> <strong><i>Submit</i></strong>

            </div>
        </div>
    </div>
</div>

Fiddle

1 个答案:

答案 0 :(得分:3)

这是一种方法:

tr {
    display: none;
}

tr:nth-child(1),
tr:nth-child(2),
tr:nth-child(3) {
    display: table-row;
}

table:hover tr {
    display: table-row;
}

DEMO