IE：令人难以置信的跳跃表标题

Disclaimer: As it says in the title, this is targeted at Internet Explorer only. That's a perk of doing internal development - it makes life a little easier when dealing with stuff like this.

免责声明:正如标题中所述,这仅针对Internet Explorer。这是进行内部开发的好处 - 在处理这样的事情时,它会让生活变得更轻松。

Disclaimer 2: I can reproduce this in IE7 and IE6. I have not tried IE8, as this is not available for us in our corporate environment.

免责声明2:我可以在IE7和IE6中重现这一点。我没有尝试过IE8,因为在我们的企业环境中我们无法使用它。

My goal is to create a table where the content scrolls while keeping the THEAD fixed. There are a lot of different ways one can accomplish this; you can see my approach at the bottom of this post. Unfortunately, I don't have a place to publicly host this example, but you can copy and paste it here to test it out: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_parse

我的目标是创建一个表格,其中内容滚动,同时保持THEAD固定。有很多不同的方法可以实现这一目标;你可以在这篇文章的底部看到我的方法。不幸的是,我没有地方公开主持这个例子,但你可以在这里复制并粘贴它来测试它:http://www.w3schools.com/jsref/tryit.asp?filenamename = tryjsref_parse

So if you scroll the table down, and the hover the mouse over the first cell in the table, you'll see the phenomena I'm talking about: the header row jumps up!

因此,如果您向下滚动表格,并将鼠标悬停在表格中的第一个单元格上,您将看到我正在谈论的现象:标题行跳起来!

Here's where it gets fun. The table is being rendered by a third-party ASP.NET control. So I can't alter the HTML that is getting emitted; only the CSS. Using the IE7 developer's toolbar, I can tell that the class of the control is changing as I mouse over it (a new class is being added to it). Oddly enough, the toolbar does not show any onmouseover or onmouseleave events on the header, just something it calls _events and control, which are both [Object]. The source doesn't reveal anything useful either.

这是它变得有趣的地方。该表由第三方ASP.NET控件呈现。所以我不能改变发出的HTML;只有CSS。使用IE7开发人员的工具栏,我可以看出控件的类正在改变,因为我将鼠标悬停在它上面(正在添加一个新类)。奇怪的是,工具栏不会在标题上显示任何onmouseover或onmouseleave事件,只是它调用_events和control,它们都是[Object]。来源也没有透露任何有用的东西。

So my goal is to prevent this header row jump using only CSS. Is this even possible? And if it's possible, can it be done without CSS expressions (which I'm desperately trying to avoid)?

所以我的目标是仅使用CSS来防止此标题行跳转。这有可能吗?如果可能的话,可以在没有CSS表达式的情况下完成(我正在拼命避免)吗?

Here is the sample HTML which emulates what I'm seeing.

以下是模拟我所看到的示例HTML。

Paste here to test: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_parse

粘贴此处进行测试:http://www.w3schools.com/jsref/tryit.asp?filenamename = tryjsref_parse

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.ScrollContainer
{
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 auto;
    width: 100% !important;
    max-height: 275px;
    border-bottom: solid 1px #009DD9;
}

.ScrollContainer .MasterTable
{
    width: auto !important;
}

.ScrollContainer table
{
    table-layout: fixed;    
}

.ScrollContainer .GridHeader
{
    position:relative;
    top: 0px;
    border-top: solid 1px #009DD9;
    border-right: solid 1px #009DD9;
    border-bottom: solid 1px #009DD9;
    border-left: solid 1px #009DD9;
    background: #cccccc;
}

#Spacer
{
    height: 350px;
}

.GridHeader
{
    height: 30px !important;
}

</style>
</head>
<body>
<div id="Spacer"></div>
<div class="ScrollContainer">
<div class="Dummy">
<div class="Grid">
<table class="MasterTable">
<colgroup>
<col/><col/><col/><col/><col/><col/>
</colgroup>
<thead><tr>
<th class="GridHeader" onMouseEnter="this.className = this.className + ' GridOver';" onMouseLeave="this.className = this.className.replace(' GridOver', '');" ><a href="#" style="GridLink">Column 1</a></th>
<th class="GridHeader"><a href="#" style="GridLink">Column 2</a></th>
<th class="GridHeader"><a href="#" style="GridLink">Column 3</a></th>
<th class="GridHeader"><a href="#" style="GridLink">Column 4</a></th>
<th class="GridHeader"><a href="#" style="GridLink">Column 5</a></th>
<th class="GridHeader"><a href="#" style="GridLink">Column 6</a></th></tr>
</thead>
<tbody>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>

2 个解决方案

#1

I understand that your question specifies that the change be made strictly through CSS. I suggest JQuery solutions because using JQuery one can make CSS changes after a document has loaded.

我知道您的问题指出严格通过CSS进行更改。我建议使用JQuery解决方案,因为使用JQuery可以在文档加载后进行CSS更改。

The modestly-named Stupid fixed header is a JQuery plugin that allows both vertical and horizontal scrolling.

名为Stupid的固定标头是一个JQuery插件,允许垂直和水平滚动。

Suprotim Agarwal shows a JQuery approach specifically for an ASP.NET GridView here.

Suprotim Agarwal在这里专门为ASP.NET GridView展示了一种JQuery方法。

It is possible that JQuery will also allow you to in effect modify the HTML generated by the ASP control, because you can in your JavaScript simply grab the table after the ASP control has prepared it and stuff it with attributes. It depends on the timing and how aware the ASP control is of outsiders manipulating its table through the DOM.

有可能JQuery还允许你实际修改ASP控件生成的HTML,因为你可以在你的JavaScript中简单地在ASP控件准备好之后抓取表并用属性填充它。它取决于时间以及ASP控制是如何通过DOM操纵其表的外部人员。

2 个解决方案

#1

更多相关文章

随机推荐