How to make <tr>'s height of position:fixed column follow its content's height?

Question

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>

Answer 1

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/

Answer 2

I ended up by using @feesar answer, however I had another issue regarding performance. Therefore, Here is the final result for my case: 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";
  }

The logic and the result are the same, but it has a better performance. Hopefully, it can help.

Answer 3

In terms of performance, I think you will be best off simply cloning the first table column and painting it above the "real" one, like this:

 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"); });

 #table-wrapper { position: relative; } #table-wrapper table { text-align: center; table-layout: fixed; overflow-x: scroll; width: 1200px; border-collapse: collapse; } #table-wrapper table tr > * { margin-left: 150px; width: auto; } #table-wrapper table tr > *:first-child { width: 6em; } #table-wrapper table.overlay { position: absolute; top: 0; color: red; background-color: white; width: 6em; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <button id="left">&larr;</button> <button id="right">&rarr;</button> </p> <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>