javascript - 表格行高于 CSS 指定的行数(仅限 iPhone)

Question

我的目标是固定表格的第一列并使表格的其余部分可水平滚动。

引用 jsfiddle:https://jsfiddle.net/e1thx7sj/4/ (省略滚动)

我实现这一目标的主要步骤是:

1. 创建现有表的副本(jquery 克隆)
2. 将此副本插入现有表格旁边
3. 从副本中删除所有表格单元格每行中的第一个单元格除外。
4. 将这个带有 z-index 和绝对定位的单列副本放在主表的第一列上。

这是代码:

var $table = $('.table');
// clone the table and insert it with an additional class
var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
// remove all cells except of the first column cells
$fixedColumn.find('thead tr:first-child th:not(:first-child)').remove();
$fixedColumn.find('thead tr:not(:first-child) th').remove();
$fixedColumn.find('td:not(:first-child)').remove();

到目前为止一切顺利。但是“固定列”中的行高不适合主表的行高。它看起来像这样:

所以我写了一个 JS 函数(jsfiddle 中的 setRowHeightsEqualToBaseTable)来调整行高。

function setRowHeightsEqualToBaseTable() {
   $fixedColumn.find('tr').each(function(i, elem) {
      var $row = $(this);
      var $fixedColumn = $row.parents('table');
      var $baseTable = $fixedColumn.siblings('table:not(.fixed-column)');
      var cellHeight = $baseTable.find('tr:eq(' + i + ')'[0].getBoundingClientRect().height;
      $row.outerHeight(cellHeight);
   });
}

这非常有效。但不适用于 iPhone Chrome/iPhone Safari。

即使正确设置了 css 高度属性 (36px)，浏览器也会计算另一个高度值 (56px)。

我想这与行高有关，因为这个 (20px) 是高度之间的差异。但我不明白为什么会有这种差异。

Answer 1

而不是 remove() 来隐藏你的单元格，你应该使用 css() (visibility 或 opacity ) ，因此不仅结构而且列和行的大小保持不变。

一些 z-index 必须设置和重置，以保持单元格的内容对鼠标事件使用react。

为了更好地与样式交互，将克隆设置得更高一个级别可能也是明智的(以处理 overflow:hidden 然后是 overflow:scroll) .

例子

// get the table
var $table = $('.table');
// clone the table and insert it with an additional class
var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
// remove all cells except of the first column cells
$fixedColumn.find('thead tr:first-child th:not(:first-child)').css('visibility', 'hidden');
$fixedColumn.find('thead tr:not(:first-child) th').css('visibility', 'hidden');
$fixedColumn.find('td:not(:first-child)').css('visibility', 'hidden');


setRowHeightsEqualToBaseTable();

/**
 * Each tr in the fixed column should have the same height as the underlying table row.
 */
function setRowHeightsEqualToBaseTable() {
  $fixedColumn.find('tr').each(function(i, elem) {
    var $row = $(this);
    var $fixedColumn = $row.parents('table');
    var $baseTable = $fixedColumn.siblings('table:not(.fixed-column)');
    var cellHeight = $baseTable.find('tr:eq(' + i + ')')[0].getBoundingClientRect().height;
    $row.outerHeight(cellHeight);
  });
}

/**
 * On resize of the window the heights of table row may change - update view
 */
$(window).on('resize', function() {
  setRowHeightsEqualToBaseTable();
});

.table-wrapper {
  width:100%;
  position: relative;
  overflow:hidden;
}
.table-parent {
  width:100%;
  overflow:auto;
}
.fixed-column {
  position: absolute;
  left: 0;
  }

.fixed-column th, .fixed-column td {
  background-color: white;
  border-right: 1px solid gray;
}

.table {
    border: none;
    border-collapse: separate;
    display: table;
    border-spacing: 0;
    margin-bottom: 0;
    max-width: 150%;
    width: 150%;
    background-color: transparent;
}

.table > thead > tr > th.first-col {
  width: 130px !important;
  min-width: 130px !important;
  max-width: 130px !important;
}

.table tbody tr td {
  border-left: 1px solid gray;
  border-top: 1px solid gray;
}
.table tbody tr td:first-child {
  border-left: none;
}
.table-parent > .table tr :first-child ~ *,
.table-wrapper .fixed-column tr :first-child {
  background:white;
  position:relative;
  z-index:2
}
.table-wrapper .fixed-column tr :first-child {
  z-index:3
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-wrapper">
  <div class="table-parent">
    <table class="table">
      <thead>
        <tr>
          <th rowspan="2" class="first-col">Device Name,<br/>Product Brand</th>
          <th rowspan="2">Lorem ipsum,<br/>Lorem ipsum</th>
          <th rowspan="2" style="width: 100px;">Lorem ipsum</th>
          <th colspan="4">Lorem ipsum</th>
          <th rowspan="2" style="width: 70px;">Lorem ipsum</th>
          <th rowspan="2" style="width: 40px;">Lorem ipsum</th>
        </tr>
        <tr>
          <th style="width: 65px;">V</th>
          <th style="width: 65px;">V</th>
          <th style="width: 65px;">V</th>
          <th style="width: 65px;">V</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><a href="#">A link</a></td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
        </tr>
        <tr>
          <td><a href="#">A link</a></td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
        </tr>
        <tr>
          <td><a href="#">A link</a></td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
        </tr>
        <tr>
          <td><a href="#">A link</a></td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

https://jsfiddle.net/e1thx7sj/7/