调整表头大小以匹配ASP.net GridView生成的表体

Resize table header to match the table body generated by ASP.net GridView

本文关键字：GridView net ASP 表头 调整      更新时间：2023-09-26

我有以下小提琴：http://jsfiddle.net/byB9d/3282/

脚本：

function removeClassName (elem, className) {
    elem.className = elem.className.replace(className, "").trim();
}
function addCSSClass (elem, className) {
    removeClassName (elem, className);
    elem.className = (elem.className + " " + className).trim();
}
String.prototype.trim = function() {
    return this.replace( /^'s+|'s+$/, "" );
}
function stripedTable() {
    if (document.getElementById && document.getElementsByTagName) {  
        var allTables = document.getElementsByTagName('table');
        if (!allTables) { return; }
        for (var i = 0; i < allTables.length; i++) {
            if (allTables[i].className.match(/['w's ]*scrollTable['w's ]*/)) {
                var trs = allTables[i].getElementsByTagName("tr");
                for (var j = 0; j < trs.length; j++) {
                    removeClassName(trs[j], 'alternateRow');
                    addCSSClass(trs[j], 'normalRow');
                }
                for (var k = 0; k < trs.length; k += 2) {
                    removeClassName(trs[k], 'normalRow');
                    addCSSClass(trs[k], 'alternateRow');
                }
            }
        }
    }
}
window.onload = function() { stripedTable(); }

我如何才能确保头部与身体匹配。

我建议更改您的表结构。您可以制作一个固定的表头，而无需将其拆分为两个表。

HTML

<div class="container">
    <div class="container-inner">
        <table>
            <thead>
                <tr>
                    <th><div class="th-inner">First</div></th>
                    <th><div class="th-inner">Second</div></th>
                    <th><div class="th-inner">Third</div></th>
                </tr>
            </thead>
            <tbody>
                <!-- Your table content here -->
            </tbody>
        </table>
    </div>
</div>

CSS

.container {
    position: relative; /* could be absolute or relative */
    padding-top: 30px; /* height of header */
    height: 200px; /* the height your table should be */
}
.container-inner {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
}
.th-inner {
    position: absolute;
    top: 0;
    line-height: 30px; /* height of header */
}

JSFiddle演示

其他固定表头的来源、更多信息和示例可以在这里找到。

您的头中有7项，td中只有6项，因此，它永远不会匹配。

去掉所有的CSS，标题与表的其余部分对齐。这个问题肯定在CSS中。

问题在CSS中。只需将display: block从html>body thead.fixedHeader tr和html>body tbody.scrollContent中移除即可。

这是小提琴。

相关文章：