Question

这个想法：
创建一个adwords样式的表来显示数据，并带有固定的，类似流体的标题。

方法：
克隆表格标题，从实际表格中为其单元格指定相应的宽度，当表格标题滚出视口（垂直）时固定到顶部，并在水平滚动时向左滚动标题。

问题：
如标题中所述。显然webkit和IE计算单元格不同（我猜？）来自Mozilla和Opera（其中一切正常，但是当窗口只有“正确”宽度时，标题突然向右突出一个像素）。 / p>

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">&nbsp;</td>
<td class="a-l">&nbsp;</td>
<td class="a-l">&nbsp;</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">&nbsp;</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％会使单元格中的文本在某些浏览器中渗透到相邻单元格中;
某些单元格具有百分比宽度，因为它们会占用太多空间（即表格中的最后一列“est.bid first call”）不应该“占用”其他“更重要”列的空间，例如第一列;
为了布局目的，整个页面已在表格中强制转换。管理这种布局会使html / css变得不必要地沉重和笨重;
支持适用于所有现代浏览器和IE8 +。

我已经尝试了很多方法，但由于我对js / jq的了解非常有限，我无法找到合适的解决方案来解决这个问题。

请帮帮忙？

Answer 1

终于解决了。问题显然是jquery的.width函数舍入子像素。

应用

document.defaultView.getComputedStyle(e, null).width

解决了它。

未对齐的边框/宽度固定表格标题和表格

1 个答案: