如何制作< tr>的位置高度：固定列是否跟随其内容的高度？ [英] How to make <tr>'s height of position:fixed column follow its content's height?

问题描述

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

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

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

 ＃table-wrapper {width：95％;向左飘浮; overflow-x：scroll;背景：#ddd;} table {background：#fff;宽度：1200px; text-align：center;溢出：隐藏; position：relative;} table thead tr th {width：15em;} table thead tr th：first-child，table tbody tr td：first-child {top：auto;左：0.5;位置：固定; width：6em;} table thead tr th：nth-​​child（2），table tbody tr td：nth-​​child（2）{padding-left：7em; / *显示第一列后面的第二列* /}  

< button id =left>& larr;< / button>< button id =right>& rarr;< / button>< div id =table-wrapper> < table border =1> < THEAD> < TR> <的第i;标题1< /第> <的第i; Heading2< /第> <的第i; Heading3< /第> <的第i; Heading4< /第> <的第i; Heading5< /第> < / 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 LT峰; 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>

解决方案

  $ 
 （'table tbody tr td：first-child'）。each（function（）{
 var height = $（this）.height（）; 
 $（this）.parent（）。find 'td'）。height（height）; 
}）; 
  

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

Currently, I have a table in my page and I am trying to make the first column freeze. The freeze column works fine using position: fixed for that particular column.

However there is another problem. When the content has more than one row, the <tr> doesn't extend its height based on its content. Therefore, is there any solution for this?

Here is my demo: 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>

解决方案

You can go through all td fixed elements and then set those heights to default td elements.

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

Working example https://jsfiddle.net/ckfdubsf/122/

这篇关于如何制作< tr>的位置高度：固定列是否跟随其内容的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！