javascript - 设置表格单元格高度和宽度时，.outerHeight 和 .outerWidth 呈指数增长

Question

• 另一位 Web 开发人员希望卡住最左边的列并允许滚动表格。他找到了这段代码并将其实现到他客户的网站中。该代码完成其工作并按预期工作。

• 但是，他添加了一些 @media 查询，以使表格的响应速度更快。当这样做时，它搞砸了 table 。它使左列与表格的其余部分不对齐。

@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 查询时，左列将如何错位。 (查看此 fiddle 时，重要的是要命中@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/