Question

目前，我的页面中有一个表格，我正在尝试将第一列冻结。使用position: fixed对于该特定列，冻结列可以正常工作。

但是还有另一个问题。当内容包含多行时，<tr>不会根据其内容扩展其高度。因此，有没有解决方案？

这是我的演示： https://jsfiddle.net/yusrilmaulidanraji/ckfdubsf/121/

#table-wrapper {
  width: 95%;
  float: left;
  overflow-x: scroll;
  background: #ddd;
}

table {
  background: #fff;
  width: 1200px;
  text-align: center;
  overflow: hidden;
  position: relative;
}

table thead tr th {
  width: 15em;
}

table thead tr th:first-child,
table tbody tr td:first-child {
  top: auto;
  left: 0.5;
  position: fixed;
  width: 6em;
}

table thead tr th:nth-child(2),
table tbody tr td:nth-child(2) {
  padding-left: 7em;
  /*to show second column behind the first*/
}

<button id="left">&larr;</button>
<button id="right">&rarr;</button>

<div id="table-wrapper">
  <table border="1">
    <thead>
      <tr>
        <th>Heading1</th>
        <th>Heading2</th>
        <th>Heading3</th>
        <th>Heading4</th>
        <th>Heading5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1<br/>asdasdada</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
        <td>15</td>
      </tr>
      <tr>
        <td>2<br/>asdasdada<br/>asdasdada</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
      </tr>
      <tr>
        <td>3<br/>asdasdada</td>
        <td>32</td>
        <td>33</td>
        <td>34</td>
        <td>35</td>
      </tr>
      <tr>
        <td>4<br/>asdasdada<br/>asdasdada<br/>asdasdada<br/>asdasdada<br/>asdasdada</td>
        <td>42</td>
        <td>43</td>
        <td>44</td>
        <td>45</td>
      </tr>
      <tr>
        <td>5<br/>asdasdada</td>
        <td>52</td>
        <td>53</td>
        <td>54</td>
        <td>55</td>
      </tr>
    </tbody>
  </table>

</div>

Answer 1

您可以浏览所有固定元素，然后将这些高度设置为默认的td元素。

  $('table tbody tr td:first-child').each(function(){
      var height = $(this).height();
      $(this).parent().find('td').height(height);
  });

工作示例https://jsfiddle.net/ckfdubsf/122/

Answer 2

我最后使用了@feesar的答案，但是我还有另外一个关于性能的问题。因此，以下是我案例的最终结果： https://jsfiddle.net/yusrilmaulidanraji/ckfdubsf/124/

  // Adjust the th and td's height.
  // Improve the performance by using native js + for loop.
  var firstHeader = $('#table-wrapper th:first-child');
  firstHeader[0].style.height = firstHeader[0].parentNode.offsetHeight + "px";
  var firstColumn = $('#table-wrapper td:first-child');
  for (var i = 0; i < firstColumn.length; i++) {
    firstColumn[i].parentNode.style.height = firstColumn[i].offsetHeight + "px";
  }

逻辑和结果相同，但它具有更好的性能。希望它可以提供帮助。

Answer 3

就性能而言，我认为你最好只需克隆第一个表格列并将其绘制在＆＃34;真实＆＃34;一个，像这样：

＆＃13;

WebView

＆＃13;

<ContentPage.Content>
    <ScrollView> <!-- ScrollView not needed as WebView has inbuilt scrolling behavior -->
        <StackLayout Spacing="10" Margin="20">
           <WebView x:Name="Browser" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
        </StackLayout>
    </ScrollView>
</ContentPage.Content>

＆＃13;

var $overlayTable = $("#table-wrapper table").clone().addClass("overlay");
$overlayTable.find("tr > *:not(:first-child)").remove();
$overlayTable.appendTo("#table-wrapper");

$(window).on("scroll", function () {
    $overlayTable.css("left", $(window).scrollLeft() + "px");
});

＆＃13;

如何制作位置高度：固定列是否遵循其内容的高度？

3 个答案: