Javascript-форум - Position fixed, но динамический по оси ОХ

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Position fixed, но динамический по оси ОХ (https://javascript.ru/forum/dom-window/41343-position-fixed-no-dinamicheskijj-po-osi-okh.html)

Position fixed, но динамический по оси ОХ

Всем здравствуйте. Недавно получила задание следующего характера: существует таблица:список мастеров сверху, а по вертикали время записи. Верхний блок(мастера) должен быть фиксированным по оси ОУ, но при прокрутке по горизонтали верхний блок должен стать динамическим,чтобы фамилии мастеров соответствовали их значениям по оси ОУ.

Не совсем понял вопрос, но если понял правильно то так:

echo '<div style="overflow:auto; width:200%;">'; 
echo '<div style="position:absolute; width:200%;">'; 
echo '<table border="1" width="200%">';
echo '<tr style="background: #FFFACD;">'; 
echo '<td>Иванов</td>';
echo '<td>Петров</td>';
echo '<td>Сидоров</td>';
echo '<td>Иванов</td>';
echo '<td>Петров</td>';
echo '<td>Сидоров</td>';
echo '<td>Иванов</td>';
echo '<td>Петров</td>';
echo '<td>Сидоров</td>';
echo '<td>Иванов</td>';
echo '<td>Петров</td>';
echo '<td>Сидоров</td>';
echo '<td>Иванов</td>';
echo '<td>Петров</td>';
echo '<td>Сидоров</td>';
echo '<td>Иванов</td>';
echo '<td>Петров</td>';
echo '<td>Сидоров</td>';
echo '<td>Иванов</td>';
echo '<td>Петров</td>';
echo '<td>Сидоров</td>';
echo'</tr>';
echo '</table></div><br><br><br><br><br><br><br>';
echo '<div style="width:100%; height:68%;">
<table id="table" width="100%">';

for ($i=0; $i<100; $i++){
echo '<tr style="background: #FFFACD;">'; 
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo'</tr>';
}
echo'</div>';
?>

Оформление корявое но работает как положено

Гробовщик,не совсем. Блок №2 должен располагаться вертикально, а блок с фамилиями горизонтально.прилагаю скрин

когда я прокручиваю вправо верхняя панель с фамилиями остается на месте, хотя ячейки относятся не к ним. Хотела оформить решение через яваскрипт, условием if, но ничего не получается:-((

Ой извиняюсь, неправильно нихрена( Вот так лучше

<!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" xml:lang="ru" lang="ru" dir="ltr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	</head>
<body>
<style>
#header {
    width: 150%;
    display: block;
    position: fixed;
    background: #fff;
    overflow: hidden;
    z-index: 1;
}
#header div {
    display: table-cell;
    padding: 15px;
    border: 1px solid #ccc;
    border-collapse: collapse;
    font-weight: bold;
}
table {
    width: 150%;
}
thead {
    visibility: hidden;
}
td, th {
    border: 1px solid #ccc;
    border-collapse: collapse;
    padding: 15px;
}
</style>

<script src='http://code.jquery.com/jquery-1.7.2.js' type='text/javascript'></script>  
<script language="javascript">
jQuery(document).ready(function($){
    var $table = $('table'),
 $header = $('#header'),
    $thead = $('thead');
    $thead.find('th').each(function(){
        var $newdiv = $('<div />', {
            style: 'width:'+ $(this).width()+'px'
            
        });
        $newdiv.text($(this).text());
        $header.append($newdiv);
    });
    
     var $viewport = $(window); 

    $viewport.scroll(function(){
     $header.css({
         left: -$(this).scrollLeft()
     });

    });
});
</script>

<div id="header"></div>
<table>
<thead>
<tr>
<th>Время</th>
<th>Иванов</th>
<th>Петров</th> 
<th>Сидоров</th> 
</tr>
</thead>


<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
</table>
</body></html>

спасибо большое)) чуть чуть доработать и само то))):)