簡體   English   中英

Chrome CSS絕對位置用於凍結表標題

[英]Chrome css position absolute for freezing table headers

我目前有兩個互相重疊的表。 前面的表僅顯示其標題,並且使用css“ visibility:hidden”隱藏了正文。 該表使用“ position:absolute”使其凍結到位,該表是第二個表的完整克隆。

當我在IE上進行測試時,第二張表的tbody上的下拉列表和鏈接工作正常,但是當我在chrome上對其進行測試時,第二張表無法單擊,因為它被前面的隱藏表主體阻塞了。

我可以使用其他方法在chrome上實現標頭凍結嗎?

注意:將要加載的數據是動態地具有不同大小的。 每列的寬度將相應調整。

這是一個示例代碼,但是在小提琴上工作正常,但是當用作html文件並在chrome上運行時將無法正常工作: https : //fiddle.jshell.net/3poz4o4q/3/

添加了我測試過的整個HTML文件。 從此處http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js獲得jquery,並將其保存在文件名“ jquery-1.9.1.min.js”上並對其進行引用。

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script>
function onLoad() {
    var cloneData = $('#actualData tr').clone(false);
    $("#sampleData").append(cloneData);

    var cloneHeader = $('#behindHeader tr').clone();
    $("#showingHeader").append(cloneHeader);

    $("#sampleData").css("visibility", "collapse");
    $("#behindHeader").css("visibility", "collapse");

    $("#tableHeader").css("position", "absolute");
}
</script>
<body onload="onLoad()">
<div class="table-header" id="tableHeader">
    <table class="editableTable" id="editTable" border="1">
        <thead id="showingHeader"/>
        <tbody id="sampleData"/>
    </table>
</div>
<div class="table-body" id="tableBody">
    <table class="editableTable" id="bodytable" border="1">
        <thead id="behindHeader">
                            <tr id="entity-header">
                <th colspan="13">
                    <a id="Create Something">Create Something</a>
                    <a id="Create another thing">Create another thing</a>
                    <a href="#" id="save">Save</a>
                </th>
            </tr>
            <tr id="column-headers">
                <th id="data link">data link</th>
                <th id="data 1">data 1</th>
                <th id="data 2">data 2</th>
                <th id="data 3">data 3</th>
                <th id="data 4">data 4</th>
                <th id="data 5">data 5</th>
                <th id="data 6">data 6</th>
                <th id="drop down 1">drop down 1</th>
                <th><span id="checkbox 1">checkbox 1</span></th>
                <th id="drop down 2">drop down 2</th>
                <th><span id="checkbox 2">checkbox 2</span></th>
                <th id="drop down 3">drop down 3</th>
                <th><span id="checkbox 3">checkbox 3</span></th>
            </tr>
        </thead>
        <tbody id="actualData">
            <tr id="actual id" class="modified">
                <td ><a href="#" >Data ID</a></td>
                <td >Data Description 1</td>
                <td >Data Description 2</td>
                <td >Data Description 3</td>
                <td >Data Description 4</td>
                <td >Data Description 6</td>
                <td >Data Description 7</td>
                <td >
                    <select>
                        <option value="1" selected="selected">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select></td>
                <td >
                    <div class="checkbox">
                        <input id="1" type="checkbox"><label for="1"></label>
                    </div>
                </td>
                <td >
                    <select>
                        <option value="1" selected="selected">1</option>
                        <option value="2">2</option>
                    </select></td>
                <td >
                    <div class="checkbox">
                        <input id="2" type="checkbox"><label for="2"></label>
                    </div>
                </td>
                <td >
                    <select disabled="disabled">
                        <option value="1" selected="selected">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select></td>
                <td >
                    <div class="checkbox" disabled="disabled">
                        <input id="3" type="checkbox" disabled="disabled"><label for="3" disabled="disabled"></label>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
</body>

請嘗試'div class =“ table-header” id =“ tableHeader” style =“ z-index:-1”'; 將標題div放回到后面;

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM