0

I need a table in my web page with the last column frozen and the rest of the content horizontally scrollable. Although this seems to be a common situation, I couldn't find a solution for the problem when the rows of the table can have a dynamic height (meaning that the content of some cells can have line breaks).

I thought that the answer of this question would do it, but as you can see in this fork of the fidlle provided in the answer, if I change the height of one row, the height of every other row is updated, except the frozen column. My edit:

.test {
   height: 30px;
}

I don't care to use Javascript to accomplish the desired result, as long as it doesn't destroy my app performance (like setting an interval to check the row height and update the height of the frozen column). Also, it would be extremelly better to not use JQuery, since my application is written in AngularJS and I wouldn't like to include this dependency just for that.

Community
  • 1
  • 1
Frederico Pantuzza
  • 317
  • 4
  • 11
  • Maybe you don't want a table at all. Try `overflow:scroll;` and use `position:fixed;` on your Element that you want in the same position. – StackSlave Oct 25 '16 at 23:57
  • I need the columns in a row to have the same height, how could I do that without tables? – Frederico Pantuzza Oct 26 '16 at 00:42
  • in this case, maybe instead of `` using `Flexbox`(css) and `
    ` as the row cells would not be a bad idea. please give it a try
     – EhsanT Oct 26 '16 at 04:06
  • @EhsanT I thought about your suggestion but it seems to me that it would only work if the columns had a pre-defined width (even if it was percentual), am I right? If it is the case, I can not have this kind of restriction. – Frederico Pantuzza Nov 22 '16 at 10:50

0 Answers0