Выровнять столбцы на столе с фиксированным заголовком

Я ищу все, что может мне помочь, но ничего не помогает.Выровнять столбцы на столе с фиксированным заголовком

Я скопировал здесь (http://jsfiddle.net/YUyyZ/) код. Ошибка заключается в том, что фиксированная строка (thead) не выровнена с остальной частью таблицы (tbody).

Что я могу сделать? Большое спасибо.

HTML:

<table id=ff witdh=100 style=position:absolute;top:0;bottom:0;left:0;right:0; border=1 cellpadding=4 cellspacing=0> 

    <thead> 
    <th align='center'> id </th> 
    <th align='center'> aaaaaaa </th> 
    <th align='center'> asdasdad </th> 
    <th align='center'> adasd </th> 
    <th align='center'> herh4e45h </th> 
    <th align='center'> h4eh4ehg4 </th> 
    <th align='center'> gh4gh4ege </th> 
    <th align='center'> ehtre </th> 
    <th align='center'> brebebes </th> 
    <th align='center'> berberb </th> 
    <th align='center'> erberberb </th> 
    <th align='center'> erberdsber </th> 
    <thead><tbody> 
<tr> 
    <td width=100 align='center'> id </td> 
    <td width=100 align='center'> 1 </td> 
    <td width=100 align='center'> 2 </td> 
    <td width=100 align='center'> 3 </td> 
    <td width=100 align='center'> 4 </td> 
    <td width=100 align='center'> 5 </td> 
    <td width=100 align='center'> 6 </td> 
    <td width=100 align='center'> 7 </td> 
    <td width=100 align='center'> 8 </td> 
    <td width=100 align='center'> 9 </td> 
    <td width=100 align='center'> 0 </td> 
    <td width=100 align='center'> 11 </td> 
    </tr> 
<tr> 
    <td width=100 align='center'> id </td> 
    <td width=100 align='center'> 1 </td> 
    <td width=100 align='center'> 2 </td> 
    <td width=100 align='center'> 3 </td> 
    <td width=100 align='center'> 4 </td> 
    <td width=100 align='center'> 5 </td> 
    <td width=100 align='center'> 6 </td> 
    <td width=100 align='center'> 7 </td> 
    <td width=100 align='center'> 8 </td> 
    <td width=100 align='center'> 9 </td> 
    <td width=100 align='center'> 0 </td> 
    <td width=100 align='center'> 11 </td> 
    </tr> 
<tr> 
    <td width=100 align='center'> id </td> 
    <td width=100 align='center'> 1 </td> 
    <td width=100 align='center'> 2 </td> 
    <td width=100 align='center'> 3 </td> 
    <td width=100 align='center'> 4 </td> 
    <td width=100 align='center'> 5 </td> 
    <td width=100 align='center'> 6 </td> 
    <td width=100 align='center'> 7 </td> 
    <td width=100 align='center'> 8 </td> 
    <td width=100 align='center'> 9 </td> 
    <td width=100 align='center'> 0 </td> 
    <td width=100 align='center'> 11 </td> 
    </tr> 
<tr> 
    <td width=100 align='center'> id </td> 
    <td width=100 align='center'> 1 </td> 
    <td width=100 align='center'> 2 </td> 
    <td width=100 align='center'> 3 </td> 
    <td width=100 align='center'> 4 </td> 
    <td width=100 align='center'> 5 </td> 
    <td width=100 align='center'> 6 </td> 
    <td width=100 align='center'> 7 </td> 
    <td width=100 align='center'> 8 </td> 
    <td width=100 align='center'> 9 </td> 
    <td width=100 align='center'> 0 </td> 
    <td width=100 align='center'> 11 </td> 
    </tr> 
<tr> 
    <td width=100 align='center'> id </td> 
    <td width=100 align='center'> 1 </td> 
    <td width=100 align='center'> 2 </td> 
    <td width=100 align='center'> 3 </td> 
    <td width=100 align='center'> 4 </td> 
    <td width=100 align='center'> 5 </td> 
    <td width=100 align='center'> 6 </td> 
    <td width=100 align='center'> 7 </td> 
    <td width=100 align='center'> 8 </td> 
    <td width=100 align='center'> 9 </td> 
    <td width=100 align='center'> 0 </td> 
    <td width=100 align='center'> 11 </td> 
    </tr> 
<tr> 
    <td width=100 align='center'> id </td> 
    <td width=100 align='center'> 1 </td> 
    <td width=100 align='center'> 2 </td> 
    <td width=100 align='center'> 3 </td> 
    <td width=100 align='center'> 4 </td> 
    <td width=100 align='center'> 5 </td> 
    <td width=100 align='center'> 6 </td> 
    <td width=100 align='center'> 7 </td> 
    <td width=100 align='center'> 8 </td> 
    <td width=100 align='center'> 9 </td> 
    <td width=100 align='center'> 0 </td> 
    <td width=100 align='center'> 11 </td> 
    </tr> 
<tr> 
    <td width=100 align='center'> id </td> 
    <td width=100 align='center'> 1 </td> 
    <td width=100 align='center'> 2 </td> 
    <td width=100 align='center'> 3 </td> 
    <td width=100 align='center'> 4 </td> 
    <td width=100 align='center'> 5 </td> 
    <td width=100 align='center'> 6 </td> 
    <td width=100 align='center'> 7 </td> 
    <td width=100 align='center'> 8 </td> 
    <td width=100 align='center'> 9 </td> 
    <td width=100 align='center'> 0 </td> 
    <td width=100 align='center'> 11 </td> 
    </tr> 
<tr> 
    <td width=100 align='center'> id </td> 
    <td width=100 align='center'> 1 </td> 
    <td width=100 align='center'> 2 </td> 
    <td width=100 align='center'> 3 </td> 
    <td width=100 align='center'> 4 </td> 
    <td width=100 align='center'> 5 </td> 
    <td width=100 align='center'> 6 </td> 
    <td width=100 align='center'> 7 </td> 
    <td width=100 align='center'> 8 </td> 
    <td width=100 align='center'> 9 </td> 
    <td width=100 align='center'> 0 </td> 
    <td width=100 align='center'> 11 </td> 
    </tr> 
<tr> 
    <td width=100 align='center'> id </td> 
    <td width=100 align='center'> 1 </td> 
    <td width=100 align='center'> 2 </td> 
    <td width=100 align='center'> 3 </td> 
    <td width=100 align='center'> 4 </td> 
    <td width=100 align='center'> 5 </td> 
    <td width=100 align='center'> 6 </td> 
    <td width=100 align='center'> 7 </td> 
    <td width=100 align='center'> 8 </td> 
    <td width=100 align='center'> 9 </td> 
    <td width=100 align='center'> 0 </td> 
    <td width=100 align='center'> 11 </td> 
    </tr> 
<tr> 
    <td width=100 align='center'> id </td> 
    <td width=100 align='center'> 1 </td> 
    <td width=100 align='center'> 2 </td> 
    <td width=100 align='center'> 3 </td> 
    <td width=100 align='center'> 4 </td> 
    <td width=100 align='center'> 5 </td> 
    <td width=100 align='center'> 6 </td> 
    <td width=100 align='center'> 7 </td> 
    <td width=100 align='center'> 8 </td> 
    <td width=100 align='center'> 9 </td> 
    <td width=100 align='center'> 0 </td> 
    <td width=100 align='center'> 11 </td> 
    </tr> 
<tr> 
    <td width=100 align='center'> id </td> 
    <td width=100 align='center'> 1 </td> 
    <td width=100 align='center'> 2 </td> 
    <td width=100 align='center'> 3 </td> 
    <td width=100 align='center'> 4 </td> 
    <td width=100 align='center'> 5 </td> 
    <td width=100 align='center'> 6 </td> 
    <td width=100 align='center'> 7 </td> 
    <td width=100 align='center'> 8 </td> 
    <td width=100 align='center'> 9 </td> 
    <td width=100 align='center'> 0 </td> 
    <td width=100 align='center'> 11 </td> 
    </tr> 
<tr> 
    <td width=100 align='center'> id </td> 
    <td width=100 align='center'> 1 </td> 
    <td width=100 align='center'> 2 </td> 
    <td width=100 align='center'> 3 </td> 
    <td width=100 align='center'> 4 </td> 
    <td width=100 align='center'> 5 </td> 
    <td width=100 align='center'> 6 </td> 
    <td width=100 align='center'> 7 </td> 
    <td width=100 align='center'> 8 </td> 
    <td width=100 align='center'> 9 </td> 
    <td width=100 align='center'> 0 </td> 
    <td width=100 align='center'> 11 </td> 
    </tr> 
<tr> 
    <td width=100 align='center'> id </td> 
    <td width=100 align='center'> 1 </td> 
    <td width=100 align='center'> 2 </td> 
    <td width=100 align='center'> 3 </td> 
    <td width=100 align='center'> 4 </td> 
    <td width=100 align='center'> 5 </td> 
    <td width=100 align='center'> 6 </td> 
    <td width=100 align='center'> 7 </td> 
    <td width=100 align='center'> 8 </td> 
    <td width=100 align='center'> 9 </td> 
    <td width=100 align='center'> 0 </td> 
    <td width=100 align='center'> 11 </td> 
    </tr> 
<tr> 
    <td width=100 align='center'> id </td> 
    <td width=100 align='center'> 1 </td> 
    <td width=100 align='center'> 2 </td> 
    <td width=100 align='center'> 3 </td> 
    <td width=100 align='center'> 4 </td> 
    <td width=100 align='center'> 5 </td> 
    <td width=100 align='center'> 6 </td> 
    <td width=100 align='center'> 7 </td> 
    <td width=100 align='center'> 8 </td> 
    <td width=100 align='center'> 9 </td> 
    <td width=100 align='center'> 0 </td> 
    <td width=100 align='center'> 11 </td> 
    </tr> 
<tr> 
    <td width=100 align='center'> id </td> 
    <td width=100 align='center'> 1 </td> 
    <td width=100 align='center'> 2 </td> 
    <td width=100 align='center'> 3 </td> 
    <td width=100 align='center'> 4 </td> 
    <td width=100 align='center'> 5 </td> 
    <td width=100 align='center'> 6 </td> 
    <td width=100 align='center'> 7 </td> 
    <td width=100 align='center'> 8 </td> 
    <td width=100 align='center'> 9 </td> 
    <td width=100 align='center'> 0 </td> 
    <td width=100 align='center'> 11 </td> 
    </tr>

CSS:

table a:link { 
color: #666; 
font-weight: bold; 
text-decoration:none; 
} 
table a:visited { 
color: #999999; 
font-weight:bold; 
text-decoration:none; 
} 
table a:active, 
table a:hover { 
color: #bd5a35; 
text-decoration:underline; 
} 
table { 
font-family:Arial, Helvetica, sans-serif; 
color:#666; 
font-size:12px; 
background:#eaebec; 
border:#ccc 1px solid; 

border-radius:3px; 
border-collapse:collapse; border-spacing: 0; 

box-shadow: 0 1px 2px #d1d1d1; 
} 
table th { 
padding:10px 10px 10px 10px; 
border-top:0; 
border-bottom:1px solid #e0e0e0; 
border-left: 1px solid #e0e0e0; 

background: #ededed; 
} 
table th:first-child { 
text-align: left; 
} 
table tr:first-child th:first-child { 
border-top-left-radius:3px; 
border-left: 0; 
} 
table tr:first-child th:last-child { 
border-top-right-radius:3px; 
} 
table tr { 
text-align: center; 
} 
table td:first-child { 
text-align: left; 
border-left: 0; 
} 
table td { 
padding:10px; 
border-bottom:1px solid #e0e0e0; 
border-left: 1px solid #e0e0e0; 
background: #fafafa; 
} 
table tr:last-child td { 
border-bottom:0; 
} 
table tr:last-child td:first-child { 
border-bottom-left-radius:3px; 
} 
table tr:last-child td:last-child { 
border-bottom-right-radius:3px; 
} 
table tr:hover td { 
background: #f2f2f2; 

} 
table th, table td { 
width: 160px; 

} 
#wrapper { 
width: 100%; 
height: 100%; 
} 
table thead 
{ 
position:fixed; 
}

источник

2014-01-26 TakuyaMK

Просто удалите `тегов. :) Должен быть установлен, проверен. Рабочая скрипку: http://jsfiddle.net/dLQ6J/

Добавлено некоторые JQuery:

var tableOffset = $("#table-1").offset().top; 
var $header = $("#table-1 > thead").clone(); 
var $fixedHeader = $("#header-fixed").append($header); 

$(window).bind("scroll", function() { 
    var offset = $(this).scrollTop(); 

    if (offset >= tableOffset && $fixedHeader.is(":hidden")) { 
     $fixedHeader.show(); 
    } 
    else if (offset < tableOffset) { 
     $fixedHeader.hide(); 
    } 
});

ВНИМАНИЕ: БЕЖАТЬ Jquery НА СТРАНИЦЕ СОДЕРЖАТЬ КОД ПО <script> тегах, не забудьте добавить JQuery JS тоже: ли вам включить jQuery Javascript? Для запуска JQuery на странице вы должны также включать в себя следующее:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Без линии выше она не будет работать :)

источник

2014-01-26 19:30:13

Привет! Благодаря! Но ваш код не имеет фиксированной первой строки.:( – TakuyaMK

О, вы хотите, чтобы содержимое таблицы прокручивалось, но заголовок стоял на месте? –

Да, вот оно. – TakuyaMK

Из моего опыта, когда вы делаете в верхней части таблицы (THEAD) он может иметь разные ширины столбцов, чем абсолютное или относительно расположенное тело или тело таблицы.

Способ, которым я решил это в прошлом, - это использовать JavaScript, чтобы найти ширину каждого столбца в заголовке и задать ширину тела для этих значений.

Постараюсь свести код.

В основном проведите через каждый столбец в заголовке и сохраните ширину в массиве, затем проведите по телу и установите ширину каждой ячейки в соответствующую ширину столбца, чтобы она соответствовала заголовку.

в JQuery - намного легче для меня, по крайней мере по сравнению с обычной JavaScript:

 
$(document).ready(function() { 
    $('table#ff thead tr th').each(function(index) { 
    var thisWidth = $(this).width(); 
    $('table#ff tbody tr td').eq(index).css('minWidth', thisWidth); 
    }); 
});

Я думаю, что должно работать - может понадобиться незначительные изменения, но общая идея есть.

источник

2014-01-26 19:30:52

В ожидании этого, спасибо большое! – TakuyaMK

Посмотрите, исправляет ли код jQuery проблему макета, просто добавил –

Привет! Я тестировал его на своем сервере и jsFiddle, но он не работает ... Я не знаю языка jQuery, поэтому я не могу ничего редактировать, кроме как скопировать и вставить его, извините. – TakuyaMK

у вас есть опечатка в

<table id=ff witdh=100 style=position:absolute;top:0;bottom:0;left:0;right:0; border=1 cellpadding=4 cellspacing=0>

попробовать width=100%.

Обратите внимание, что при установке элемента на position:fixed вы вынимаете его из потока, а процентная ширина - это процент от документа, а не исходного родительского элемента.

источник

2014-01-26 19:31:03 otherDewi

Исправлена опечатка, но она не работает ... О положении: исправлено , Я знаю, спасибо;) – TakuyaMK

Удалить позицию: зафиксировано на вашем месте {положение: зафиксировано}

источник

2014-01-26 19:36:25 Pibolo

Но тогда тэд не будет исправлен ... – TakuyaMK

Выровнять столбцы на столе с фиксированным заголовком

ответ

Смежные вопросы