Question

我有一些代码允许水平滚动表格，而使前几列保持不变。但是当border-collapse设置为塌陷时，我有一个问题。

表格设置为“相对”，某些单元格设置为“粘性”

将border-collapse设置为单独时，一切都会按预期进行。最左侧的单元格设置为左侧：0px，对于下一个单元格，我只是将内容的宽度和边框/填充/边距加起来以计算下一个左侧位置。

将border-collapse设置为塌陷时，左侧位置无需包含左侧边界，这没有任何意义。但是，即使我考虑了这一点，并且在进行计算时也考虑了塌陷的边框，滚动仍然无法正常工作。

此处是Jsfiddle：https://jsfiddle.net/peterkronenberg/zf9xjn61/

$separateCell11 = $('.separate .cell11');
$separateCell12 = $('.separate .cell12');
$separateCell21 = $('.separate .cell21');
$separateCell22 = $('.separate .cell22');
$collapseCell11 = $('.collapse .cell11');
$collapseCell12 = $('.collapse .cell12');
$collapseCell21 = $('.collapse .cell21');
$collapseCell22 = $('.collapse .cell22');


// Set positions for separate table
var left = 0;
$separateCell11.css('left', left + 'px');

left = left +
  parseFloat($separateCell11.css('paddingLeft')) +
  parseFloat($separateCell11.css('borderLeftWidth')) +
  parseFloat($separateCell11.width()) +
  parseFloat($separateCell11.css('paddingRight')) +
  parseFloat($separateCell11.css('borderRightWidth'));
$separateCell12.css('left', left + 'px');

left = 0;
$separateCell21.css('left', left + 'px');

left = left +
  parseFloat($separateCell21.css('paddingLeft')) +
  parseFloat($separateCell21.css('borderLeftWidth')) +
  parseFloat($separateCell21.width()) +
  parseFloat($separateCell21.css('paddingRight')) +
  parseFloat($separateCell21.css('borderRightWidth'));
$separateCell22.css('left', left + 'px');


// Set positions for collapsed table

// For collapsed table, need to offset by left border
var left = parseFloat($collapseCell11.css('borderLeftWidth'));
$collapseCell11.css('left', left + 'px');

left = left +
  parseFloat($collapseCell11.css('paddingLeft')) +
  parseFloat($collapseCell11.css('borderLeftWidth')) +
  parseFloat($collapseCell11.width()) +
  parseFloat($collapseCell11.css('paddingRight')) +
  parseFloat($collapseCell11.css('borderRightWidth'));
// since borders are collapsed, subtract half of the left border
left = left - parseFloat($collapseCell12.css('borderLeftWidth')) / 2
$collapseCell12.css('left', left + 'px');

left = parseFloat($collapseCell21.css('borderLeftWidth'));
$collapseCell21.css('left', left + 'px');

left = left +
  parseFloat($collapseCell21.css('paddingLeft')) +
  parseFloat($collapseCell21.css('borderLeftWidth')) +
  parseFloat($collapseCell21.width()) +
  parseFloat($collapseCell21.css('paddingRight')) +
  parseFloat($collapseCell21.css('borderRightWidth'));    
left = left - parseFloat($collapseCell22.css('borderLeftWidth')) / 2
$collapseCell22.css('left', left + 'px');

我已经在Firefox和Chrome上尝试过此操作。

任何需要帮助的人

边框折叠的滚动表

0 个答案: