Форум

tvixa · #1 (**permalink**) 09.09.2013, 14:19

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

Гробовщик · #2 (**permalink**) 09.09.2013, 14:56

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

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>';
?>

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

tvixa · #3 (**permalink**) 09.09.2013, 15:11

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

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

Гробовщик · #4 (**permalink**) 09.09.2013, 15:21

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

<!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>

tvixa · #5 (**permalink**) 09.09.2013, 15:39

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

Форум

Справочник

Discord чат

Курсы javascript