Question

我目前有两张桌子在彼此之上。前台仅显示它的标题，并使用css＆＃34; visibility：hidden＆＃34;隐藏正文。这个表使用＆＃34; position：absolute＆＃34;为了使其冻结到位，该表是第二个表的完整克隆。

当我在IE上测试时，第二个表的tbody上的下拉和链接工作正常但是当我在chrome上测试时，第二个表无法被点击，因为它被前面隐藏的表体阻挡了它的。

我可以使用任何替代方法来实现Chrome上的标题冻结吗？

注意：将加载的数据是动态的，大小不同。每列的宽度将相应调整。

这是一个示例代码，但这在小提琴上工作正常，但在用作html文件并在chrome上运行时不会起作用：https://fiddle.jshell.net/3poz4o4q/3/

添加了我测试过的整个HTML文件。从这里得到了jquery http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js 并将其保存在文件名＆＃34; jquery-1.9.1.min.js＆＃34;并引用它。

<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>

Answer 1

请尝试'div class =“table-header”id =“tableHeader”style =“z-index：-1”'; 把标题div放回去;

Chrome css位置绝对用于冻结表头

1 个答案: