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

coder 2024-01-22 原文

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

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

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

创建现有表的副本(jquery 克隆)
将此副本插入现有表格旁边
从副本中删除所有表格单元格每行中的第一个单元格除外。
将这个带有 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) 是高度之间的差异。但我不明白为什么会有这种差异。

最佳答案

而不是 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/

关于javascript - 表格行高于 CSS 指定的行数(仅限 iPhone)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44262825/

javascript iPhone gt lt Lorem html ios css html-table

有关javascript - 表格行高于 CSS 指定的行数(仅限 iPhone)的更多相关文章

ruby - 如何指定 Rack 处理程序 - 2
Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack
ruby - capybara field.has_css?匹配器 - 2
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？最佳答案通过JonasNicklas得到了答案:No
ruby-on-rails - 在 ruby .gemspec 文件中，如何指定依赖项的多个版本？ - 2
我正在尝试修改当前依赖于定义为activeresource的gem:s.add_dependency"activeresource","~>3.0"为了让gem与Rails4一起工作，我需要扩展依赖关系以与activeresource的版本3或4一起工作。我不想简单地添加以下内容，因为它可能会在以后引起问题:s.add_dependency"activeresource",">=3.0"有没有办法指定可接受版本的列表？~>3.0还是~>4.0？最佳答案根据thedocumentation,如果你想要3到4之间的所有版本，你可以这
ruby - 如果指定键的值在数组中相同，如何合并哈希 - 2
我有一个这样的哈希数组:[{:foo=>2,:date=>Sat,01Sep2014},{:foo2=>2,:date=>Sat,02Sep2014},{:foo3=>3,:date=>Sat,01Sep2014},{:foo4=>4,:date=>Sat,03Sep2014},{:foo5=>5,:date=>Sat,02Sep2014}]如果:date相同，我想合并哈希值。我对上面数组的期望是:[{:foo=>2,:foo3=>3,:date=>Sat,01Sep2014},{:foo2=>2,:foo5=>5:date=>Sat,02Sep2014},{:foo4=>4,:dat
ruby - 无法在 60 秒内获得稳定的 Firefox 连接 (127.0.0.1 :7055) - 2
我使用的是Firefox版本36.0.1和Selenium-Webdrivergem版本2.45.0。我能够创建Firefox实例，但无法使用脚本继续进行进一步的操作无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)错误。有人能帮帮我吗？最佳答案我遇到了同样的问题。降级到firefoxv33后一切正常。您可以找到旧版本here 关于ruby-无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)，我们在StackOverflow上找到一个类
ruby - 当使用::指定模块时，为什么 Ruby 不在更高范围内查找类？ - 2
我刚刚被困在这个问题上一段时间了。以这个基地为例:moduleTopclassTestendmoduleFooendend稍后，我可以通过这样做在Foo中定义扩展Test的类:moduleTopmoduleFooclassSomeTest但是，如果我尝试通过使用::指定模块来最小化缩进:moduleTop::FooclassFailure这失败了:NameError:uninitializedconstantTop::Foo::Test这是一个错误，还是仅仅是Ruby解析变量名的方式的逻辑结果？最佳答案 Isthisabug,or
css - 用 watir 检查标签类？ - 2
我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。最佳答案试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes
ruby-on-rails - Prawn - 表格单元格内的链接 - 2
我正在尝试用Prawn生成PDF。在我的PDF模板中，我有带单元格的表格。在其中一个单元格中，我有一个电子邮件地址:cell_email=pdf.make_cell(:content=>booking.user_email,:border_width=>0)我想让电子邮件链接到“mailto”链接。我知道我可以这样链接:pdf.formatted_text([{:text=>booking.user_email,:link=>"mailto:#{booking.user_email}"}])但是将这两行组合起来(将格式化文本作为内容)不起作用:cell_email=pdf.make_c
ruby-on-rails - Rails - 使用/自定义 URL : '/dashboard' 指定根路径 - 2
如何使此根路径转到:“/dashboard”而不仅仅是http://example.com？root:to=>'dashboard#index',:constraints=>lambda{|req|!req.session[:user_id].blank?} 最佳答案您可以通过以下方式实现:root:to=>redirect('/dashboard')match'/dashboard',:to=>"dashboard#index",:constraints=>lambda{|req|!req.session[:user_id].b
ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2
我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。最佳答案这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

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

有关javascript - 表格行高于 CSS 指定的行数(仅限 iPhone)的更多相关文章

随机推荐