Question

我的一个难题是必须创建一个不滚动内容的数据表。我已经看到了一些实现，但由于各种原因它们都很简短;主要的是我希望其中一列扩展以填充可用空间。

所以我创建了两个表。一个用于标题和相关文本，另一个用于实际数据。

我有一个javascript方法，只要调整屏幕大小以在表上设置overflow-y就会调用它。如果屏幕足够高以容纳所有数据，我会隐藏滚动条并将显示设置为“没有”。

另外，我必须设置溢出到＆＃39; auto＆＃39;并显示到＆＃39;阻止＆＃39;这一切都按预期工作，但它会改变列宽。

所以我决定将数据表的每个单元格的宽度属性设置为标题表中每个单元格的clintWidth。

正在按预期设置宽度，但不会重新计算clientWidth。

    $(window).resize(sizePanels);

    function sizePanels() {
        var dataTable = document.getElementById("tblData");
        if (dataTable != null) {
            try {
                var itemHeight = 0;
                if (dataTable.rows.length > 0)
                    itemHeight = dataTable.rows[0].clientHeight;

                var itemHeight = itemHeight * dataTable.rows.length;
                var rect = dataTable.getBoundingClientRect();
                var screenHeight = document.body.clientHeight - rect.top - /*document.body.topMargin - document.body.bottomMargin -*/ 50;
                if (screenHeight < 100)
                    screenHeight = 100;

                var headerTable = document.getElementById("tblHeader");
                //var padCol = document.getElementById("padCol");
                if (itemHeight <= screenHeight) {
                    screenHeight = itemHeight;
                    //padCol.style.display = "none";
                    dataTable.style.display = "";
                    dataTable.style.overflow = "visible";
                }
                else if (dataTable.rows.length > 4) {
                    //padCol.style.display = "";
                    dataTable.style.display = "block";
                    dataTable.style.overflow = "auto";

                    var cells = headerTable.rows[0].cells;
                    for (var i = 0; i < cells.length; ++i) {
                        dataTable.rows[0].cells[i].width = cells[i].clientWidth;//.toString() + "px";
                    }
                }

                dataTable.style.height = screenHeight + "px";
            }
            catch (exception) {
            }
        }

        return (dataTable != null);
    }

这是我的HTML，我使用的是Angular：

        <table id="tblHeader" class="headerLayout" width="100%" style="table-layout: fixed;">
            <thead>
                <tr>
                    <th width="100px">First Name</th>
                    <th width="100px">Last Name</th>
                    <th>Email</th>
                    <th width="75">Products</th>
                    <th width="75">Manager</th>
                    <th width="50">Actions</th>
                    <th width="60"></th>
                </tr>
            </thead>
        </table>
        <table id="tblData" class="headerLayout" width="100%" style="table-layout: fixed;">
            <div ng-init="sizePanels();"></div>
            <tbody>
                <tr ng-repeat="user in Users | filter:filterUsers">
                    <td width="100px">{{user.FirstName}}</td>
                    <td width="100px">{{user.LastName}}</td>
                    <td width="100%">{{user.Email}}</td>
                    <td width="75">
                        <a href="#/users/addproductskills/{{user.UserId}}"><img src="\Content\images\AssignDoc.gif" style="padding-left: 17px; padding-bottom: 2px; cursor: pointer" /></a>
                    </td>
                    <td height="25px" width="75">
                        <buton class="btn btn-primary btn-xs" ng-click="openManagerDialog(user);">Assign<i class="fa fa-pencil pull-right"></i></buton>
                    </td>
                    <td height="25px" width="50">
                        <buton class="btn btn-primary btn-xs" ng-click="openEditDialog(user);">Edit<i class="fa fa-pencil pull-right"></i></buton>
                    </td>
                    <td height="25px" width="60">
                        <button class="btn btn-danger btn-xs" ng-click="deleteUser(user)">Delete<i class="fa fa-remove pull-right"></i></button>
                    </td>
                </tr>
            </tbody>
        </table>

数据表中的<div>标记用于在首次加载内容时调用JavaScript函数。

Answer 1

啊，问题在于数据表第二列的宽度为100％！我的想法是将它用作占位符。

谢谢你看看！

HTML表格单元格宽度与clientWidth

1 个答案: