0
的想法：
用於顯示數據，完成與固定，流體狀的標題建立AdWords風格表。未對齊的邊界/寬度固定的表頭和表
的方法：
克隆表頭，給出其細胞的相應寬度從實際的表，固定到頂部時，表頭滾動出視口（垂直方向）和滾動水平滾動時留下的報頭的。
問題：
如在標題中描述。很顯然，webkit和IE從Mozilla和Opera（它可以很好地工作，但當窗口只有「正確」寬度時，頭部向右突出一個像素時經常出現）計算單元格的方式不同（我猜？）。
的HTML：
<table id="table-frame">
<col id="left-col-bg">
<tr>
<td id="top-row" colspan="2">
<div id="header-container">primary-nav</div><!-- #header-container -->
</td>
</tr>
<tr>
<td id="left-col">context-nav</td>
<td id="right-col">
<div id="content">
<div id="page-header">
content header
</div><!-- page-header -->
<div id="data-container">
<div id="keyword-container">
<table class="data-table" id="kw-table">
<colgroup><col><col><col><col><col><col><col><col><col><col><col></colgroup>
<thead class="data-header">
<tr class="desc-row">
<th class="th0 a-l"><a href="">variable</a></th>
<th class="th1 a-l w-10"><a href="">topparent</a></th>
<th class="th2 a-l w-10"><a href="">subparentextended</a></th>
<th class="th3 a-l w-10"><a href="">verion</a></th>
<th class="th4 a-r w-10"><a href="">calls</a></th>
<th class="th5 a-r w-10"><a href="">interest</a></th>
<th class="th6 a-r w-5"><a href="">elem attr</a></th>
<th class="th7 a-r w-10"><a href="">state</a></th>
<th class="th8 a-r w-10"><a href="">costs</a></th>
<th class="th9 a-r w-5"><a href="">return</a></th>
<th class="th10 a-r w-5"><a href="">est. bid first call</a></th>
</tr>
</thead>
<tfoot class="data-footer">
<tr class="sum-row">
<td class="a-l">summary</td>
<td class="a-l"> </td>
<td class="a-l"> </td>
<td class="a-l"> </td>
<td class="a-r">100.000</td>
<td class="a-r">1.234.567.890</td>
<td class="a-r">0,0</td>
<td class="a-r"> </td>
<td class="a-r fin">$ 1.123.456,00</td>
<td class="a-r">20.000</td>
<td class="a-r fin">$ 12,50</td>
</tr>
</tfoot>
<tbody class="data-body">
<tr class="data-row first-row">
<td class="a-l">variable cell plus</td>
<td class="a-l"><a href="">top parent</a></td>
<td class="a-l"><a href="">sub parent</a></td>
<td class="a-l">type</td>
<td class="a-r">2.000</td>
<td class="a-r">15.000</td>
<td class="a-r">10,50</td>
<td class="a-r">active</td>
<td class="a-r fin">$ 120,50</td>
<td class="a-r">50</td>
<td class="a-r fin">$ 12,50</td>
</tr>
<tr class="data-row alt-row">
<td class="a-l">variable cells</td>
<td class="a-l"><a href="">basic top parent</a></td>
<td class="a-l"><a href="">sub parent</a></td>
<td class="a-l">type</td>
<td class="a-r">2.000</td>
<td class="a-r">15.000</td>
<td class="a-r">10,50</td>
<td class="a-r">active</td>
<td class="a-r fin">$ 120,50</td>
<td class="a-r">50</td>
<td class="a-r fin">$ 12,50</td>
</tr>
<tr class="data-row">
<td class="a-l">variable to cell</td>
<td class="a-l"><a href="">top parent</a></td>
<td class="a-l"><a href="">sub parent</a></td>
<td class="a-l">type</td>
<td class="a-r">2.000</td>
<td class="a-r">15.000</td>
<td class="a-r">10,50</td>
<td class="a-r">active</td>
<td class="a-r fin">$ 120,50</td>
<td class="a-r">50</td>
<td class="a-r fin">$ 12,50</td>
</tr>
<tr class="data-row alt-row">
<td class="a-l">cell</td>
<td class="a-l"><a href="">top parent</a></td>
<td class="a-l"><a href="">sub parent example</a></td>
<td class="a-l">type</td>
<td class="a-r">2.000</td>
<td class="a-r">15.000</td>
<td class="a-r">10,50</td>
<td class="a-r">active</td>
<td class="a-r fin">$ 120,50</td>
<td class="a-r">50</td>
<td class="a-r fin">$ 12,50</td>
</tr>
<tr class="data-row">
<td class="a-l">variablecellextendedversion</td>
<td class="a-l"><a href="">top parent</a></td>
<td class="a-l"><a href="">sub parent</a></td>
<td class="a-l">type</td>
<td class="a-r">2.000</td>
<td class="a-r">15.000</td>
<td class="a-r">10,50</td>
<td class="a-r">active</td>
<td class="a-r fin">$ 120,50</td>
<td class="a-r">50</td>
<td class="a-r fin">$ 12,50</td>
</tr>
<tr class="data-row last-row alt-row">
<td class="a-l">variable cell</td>
<td class="a-l"><a href="">top parent</a></td>
<td class="a-l"><a href="">sub parent</a></td>
<td class="a-l">type</td>
<td class="a-r">2.000</td>
<td class="a-r">15.000</td>
<td class="a-r">10,50</td>
<td class="a-r">active</td>
<td class="a-r fin">$ 120,50</td>
<td class="a-r">50</td>
<td class="a-r fin">$ 12,50</td>
</tr>
</tbody>
</table>
</div><!-- keyword-container -->
</div><!-- data-container -->
</div><!-- content -->
</td>
</tr>
<tr>
<td id="bottom-row" colspan="2"><div id="footer-container">footer</div></td>
</tr>
</table>
的CSS：
html, body {
border:0;
height:100%;
margin:0;
padding:0;
outline:0;
width:100%;
}
body {
background:#fff;
color:#000;
font:400 14px/20px Arial, Helvetica, sans-serif;
text-align:left;
}
small {
font-size:.75em;
}
b, strong {
font-weight:600;
}
p {
margin:0 0 10px;
}
p:last-child {
margin:0;
}
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
zoom:1;
}
#header-container {
background:#fff;
border-bottom:1px solid #ddd;
}
#table-frame {
height:100%;
width:100%;
min-width:960px;
}
#table-frame {
border-collapse:collapse;
}
#top-row,
#bottom-row,
#left-col,
#right-col {
border-spacing:0;
margin:0;
padding:0;
vertical-align:top;
}
#left-col-bg {
background:#fff;
border-right:1px solid #ddd;
width:220px;
}
#top-row {
height:1px;
vertical-align:top;
}
#bottom-row {
height:1px;
vertical-align:bottom;
}
#left-col,
#right-col {
height:auto;
vertical-align:top;
}
#left-col {
width:220px;
min-width:220px;
}
#menu-bar {
font-size:12px;
padding:10px 0 0;
}
#right-col {
width:auto;
}
#content {
}
#page-header {
border-bottom:1px solid #ddd;
padding:0 10px;
}
#footer-container {
background:#363636;
color:#e6e6e6;
font-size:12px;
font-weight:600;
padding:10px;
}
table {display:table;}
td, th {display:table-cell;}
#data-container {
}
#keyword-container {
position:relative;
margin:10px;
}
.data-table {
border-width:1px 0 0 1px;
border-style:solid;
border-color:#ccC#ccC#aaa #ccc;
border-collapse:collapse !important;
border-spacing:0;
max-width:100%;
padding:0;
position:relative;
margin:0;
table-layout:fixed;
overflow:visible;
}
.data-table th, .data-table td {
border-width:0 1px 1px 0;
border-width:0;
border-style:solid;
border-spacing:0;
font-size:11px;
overflow:visible;
padding:4px 6px;
vertical-align:baseline;
outline-width:1px;
outline-style:solid;
outline-color:red;
}
.data-table td {
font-weight:normal;
border-color:#ddd;
}
.data-table th {
background:#eee;
font-weight:bold;
border-color:#ccC#ccC#aaa #ccc;
}
.data-body a {
color:#009;
}
.data-body a:hover {
text-decoration:underline;
}
.data-table a, .data-table span {
}
.sum-row td {
background:#eee;
color:#333;
font-weight:bold;
}
.first-row td {
}
.last-row td {
border-bottom:1px solid #bbb;
}
.calc-row td {
border-color:#bbb;
}
.cloned-table {
margin-left:0;
position:absolute;
top:0;
z-index:9;
}
.cloned-table.fixed {
position:fixed;
}
.data-header a span {font-weight:bold;}
.a-l {text-align:left;}
.a-r {text-align:right !important;}
.fin {white-space:nowrap;}
.w-a {}
.w-5 {width:5%;}
.w-10 {width:10%;}
.w-20 {width:20%;}
.w-30 {width:30%;}
的JQ：
$(document).ready(function(){
initTable();
});
$(window).resize(function(){
waitForFinalEvent(function(){
resizeTable();
}, 250, 'tableResize');
});
$(window).scroll(function(){
var fromTop = $('#kw-table').offset().top;
if ($(window).scrollTop() > fromTop){
$('.cloned-table').addClass('fixed');
} else {
$('.cloned-table').removeClass('fixed').css({'margin-left':'0'});
}
positionTable();
});
function resizeTable(){
$('.data-table, .data-table th, .data-table td').removeAttr('style');
var tdWidth = '';
var tdClass = '';
var tableWidth=0;
$('#kw-table th').each(function(){
tdClass = '.'+$(this).attr('class').split(' ')[0];
tdWidth = Math.floor($(this).width());
$('.cloned-table '+tdClass).css({'width':tdWidth});
tableWidth = tableWidth + tdWidth;
});
$('.cloned-table .data-table').width(Math.floor($('#kw-table').width()));
}
function positionTable(){
var leftScroll = $(document).scrollLeft();
$('.cloned-table.fixed').css({'margin-left':-leftScroll});
}
function initTable(){
var clonedHeader = $('.data-header').html();
clonedHeader = '<div class="cloned-table"><table class="data-table"><thead class="data-header">' +
clonedHeader +
'</thead></table></div>'
$('#keyword-container').prepend(clonedHeader);
resizeTable();
}
var waitForFinalEvent = (function() {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {
uniqueId = 'tableResize';
}
if (timers[uniqueId]) {
clearTimeout (timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();
小提琴：http://jsfiddle.net/jL9hF/
備註：
- 設置表寬度爲100％，使從滲入在某些瀏覽器的相鄰小區的細胞的文本;
- 某些細胞具有percentual的寬度，因爲他們原本佔用太多的空間（即表中的最後一列「EST。申辦第一個電話」），從其他「更重要的」列不應該「佔用」空間，如第一欄;
- 爲了佈局的目的，整個頁面已經被轉換成表格。管理這種佈局會導致html/css不必要的沉重和龐大;
- 支持所有現代瀏覽器和IE8 +。
我已經嘗試了很多方法因此，但由於我對js/jq的知識如此有限，我無法找到適合此問題的解決方案。
請幫忙？
你能分享小提琴嗎？ –