Отказ от ответственности: как говорится в заголовке, он предназначен только для Internet Explorer . Это привилегия внутреннего развития - это немного облегчает жизнь при работе с такими вещами.
Отказ от ответственности 2: я могу воспроизвести это в IE7 и IE6. Я не пробовал IE8, так как он недоступен в нашей корпоративной среде.
Моя цель - создать таблицу, в которой содержимое прокручивается, сохраняя THEAD фиксированной. Есть много разных способов сделать это; Вы можете увидеть мой подход внизу этого поста. К сожалению, у меня нет места для публичного размещения этого примера, но вы можете скопировать и вставить его здесь, чтобы проверить его:
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_parse
Так что, если вы прокрутите таблицу вниз и наведете указатель мыши на первую ячейку таблицы, вы увидите явление, о котором я говорю: строка заголовка подпрыгивает вверх!
Вот где это весело. Таблица обрабатывается сторонним элементом управления ASP.NET. Поэтому я не могу изменить исходящий HTML-код; только CSS. Используя панель инструментов разработчика IE7, я могу сказать, что класс элемента управления меняется при наведении на него курсора (к нему добавляется новый класс). Как ни странно, панель инструментов не показывает какие-либо события onmouseover или onmouseleave в заголовке, просто то, что она вызывает _events и control, которые оба являются [Object]. Источник также не раскрывает ничего полезного.
Итак, моя цель - предотвратить переход строки заголовка, используя только CSS. Это вообще возможно? И если это возможно, можно ли это сделать без CSS-выражений (которых я отчаянно пытаюсь избежать)?
Вот пример HTML, который имитирует то, что я вижу.
Вставьте сюда, чтобы проверить: http://www.w3schools.com/jsref/tryit.asp?filename=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>