How To Make 's Height Of Position:fixed Column Follow Its Content's Height?

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

Solution 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/

Solution 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.

Solution 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-wrappertable {
  text-align: center;
  table-layout: fixed;
  overflow-x: scroll;
  width: 1200px;
  border-collapse: collapse;
}
#table-wrappertabletr > * {
  margin-left: 150px;
  width: auto;
}
#table-wrappertabletr > *:first-child {
  width: 6em;
}
#table-wrappertable.overlay {
  position: absolute;
  top: 0;
  color: red;
  background-color: white;
  width: 6em;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><p><buttonid="left">&larr;</button><buttonid="right">&rarr;</button></p><divid="table-wrapper"><tableborder="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>