Question

另一位网络开发人员希望冻结最左边的列并允许滚动表格。他发现了这段代码，并在客户的网站上实现了。代码完成其工作并按预期工作。
然而，他添加了一些@media查询以使表格更具响应性。这样做会搞砸桌子。它使左列不与表格的其余部分对齐。

@media screen and (max-width: 699px) and (min-width: 520px) {
  .exportTable th{
    min-width: 170px !important;
  }
  .exportTable td{
    min-width:170px !important;
    max-width:170px !important;
  }
}

所以我在window.resize（）中添加了函数调用。

$(document).ready(function () {
  app_handle_listing_horisontal_scroll($('#exportTable-listing'));
  app_handle_listing_horisontal_scroll($('#exportTable-listing2'));
  $(window).resize(function() {
    app_handle_listing_horisontal_scroll($('#exportTable-listing'));
    app_handle_listing_horisontal_scroll($('#exportTable-listing2'));
  });
});

在调整窗口大小时调用代码，但是outerHeight和outerWidth呈指数级增长，导致严重问题。

设置高度时会出现问题：

$(this).css('height', current_row_height);

和宽度/边距：

$(this).css('position','absolute')
              .css('margin-left','-'+table_collumns_margin[index]+'px')
              .css('width',table_collumns_width[index])

这是fiddle。

只需抓住窗口并来回调整大小，表格单元格的高度/宽度将呈指数级增长，从而导致严重问题。

This fiddle演示了如何在@media查询中查找左列未对齐的情况。（在查看这个小提琴时，重要的是让@media查询被击中。）

如何解决这些问题？

Answer 1

在我看来，将javascript添加到等式中会使其过于复杂。我相信你想要的只能用CSS完成。

如果浏览器的最大宽度为500px，则如何工作，然后删除粘性列。如果没有，请显示粘性列。

除非您需要支持早于IE 9的浏览器，否则请尝试使用以下尺寸：

https://jsfiddle.net/BmLpV/284/

CSS：

.zui-table {
    border: none;
    border-right: solid 1px #DDEFEF;
    border-collapse: separate;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
    background-color: #DDEFEF;
    border: none;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
    white-space: nowrap;
}
.zui-table tbody td {
    border-bottom: solid 1px #DDEFEF;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
    white-space: nowrap;
}
.zui-wrapper {
    position: relative;
}
.zui-scroller {
    margin-left: 141px;
    overflow-x: scroll;
    overflow-y: visible;
    padding-bottom: 5px;
    width: 300px;
}
.zui-table .zui-sticky-col {
    border-left: solid 1px #DDEFEF;
    border-right: solid 1px #DDEFEF;
    left: 0;
    position: absolute;
    top: auto;
    width: 120px;
}
@media (max-width: 500px) {
  .zui-table .zui-sticky-col {
      border-left: solid 1px #DDEFEF;
      border-right: solid 1px #DDEFEF;
      position: relative;
      top: auto;
      width: auto;
  }
  .zui-scroller {
    margin-left: 0;
  }
}

HTML：

<div class="zui-wrapper">
    <div class="zui-scroller">
        <table class="zui-table">
            <thead>
                <tr>
                    <th class="zui-sticky-col">Name</th>
                    <th>Number</th>
                    <th>Position</th>
                    <th>Height</th>
                    <th>Born</th>
                    <th>Salary</th>
                    <th>Prior to NBA/Country</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="zui-sticky-col">DeMarcus Cousins</td>
                    <td>15</td>
                    <td>C</td>
                    <td>6'11"</td>
                    <td>08-13-1990</td>
                    <td>$4,917,000</td>
                    <td>Kentucky/USA</td>
                </tr>
                <tr>
                    <td class="zui-sticky-col">Isaiah Thomas</td>
                    <td>22</td>
                    <td>PG</td>
                    <td>5'9"</td>
                    <td>02-07-1989</td>
                    <td>$473,604</td>
                    <td>Washington/USA</td>
                </tr>
                <tr>
                    <td class="zui-sticky-col">Ben McLemore</td>
                    <td>16</td>
                    <td>SG</td>
                    <td>6'5"</td>
                    <td>02-11-1993</td>
                    <td>$2,895,960</td>
                    <td>Kansas/USA</td>
                </tr>
                <tr>
                    <td class="zui-sticky-col">Marcus Thornton</td>
                    <td>23</td>
                    <td>SG</td>
                    <td>6'4"</td>
                    <td>05-05-1987</td>
                    <td>$7,000,000</td>
                    <td>Louisiana State/USA</td>
                </tr>
                <tr>
                    <td class="zui-sticky-col">Jason Thompson</td>
                    <td>34</td>
                    <td>PF</td>
                    <td>6'11"</td>
                    <td>06-21-1986</td>
                    <td>$3,001,000</td>
                    <td>Rider/USA</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

编辑：为了支持动态高度，您可以执行以下操作：

$(function(){
  $('.zui-table tr').each(function(i, row) {
    var height = $('.zui-sticky-col').eq(i).outerHeight() - $('.zui-sticky-col').eq(i).height();
    $('.zui-sticky-col').eq(i).height($(row).height() - height);
  });
})

为了获得更好的性能，您只能访问该元素一次：

$(function(){
  $('.zui-table tr').each(function(i, row) {
    var el = $('.zui-sticky-col').eq(i);
    var height = el.outerHeight() - el.height();
    el.height($(row).height() - height);
  });
})

https://jsfiddle.net/BmLpV/289/

.outerHeight＆amp;当设置表格单元格高度时，.outerWidth指数增长。宽度

1 个答案: