How to align table with fixed columns and table with content beside each other

Question

I know there are hundred of postings here about fixed columns, horizontal scrolling in tables - but most of them don't work for me or they have some constraints which don't allow me to use it. I tried to resolve the problem has one table which contains all frozen columns and I wanted to have a second table beside which has the scrollable columns. But even after hours, I don't get this working. I played around with many solutions - nested tables, containers - no success. I tried float left/right - but the issue is that my table is obviously too big and therefore will always float below.

So all that I want to achieve: Have a table on the left side with all frozen columns - have a table beside with the content and which can scroll horizontally. How can I wrap my 2 tables to achieve this?

I am using Angular - so I want to do this with pure HTML/CSS/Angular. I also cannot use some of the existing modules since this is part of a more complex solution.

Thanks Michael

do you have any code that you have tried? – mlegg Sep 11 '17 at 14:17 — mlegg, Sep 11 '17 at 14:17

score 0 · Answer 1 · answered Sep 11 '17 at 14:19

0

My guess would be like so

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
}

.table, .content {
  flex: 1 1 auto;
}

.table {
  min-height: 200px;
  background: #bbb;
}

.content {
  overflow-y: auto;
  max-height: 200px;
}

.text {
  min-height: 2000px;
  background: #ddd;
}

<div class="container">
  <div class="table">
  
  </div>
  <div class="content">
    <div class="text">
    
    </div>
  </div>
</div>

Go ahead, fill both rectangles with either text or content, see how it works !

answered Sep 11 '17 at 14:19

Hi, thanks for the quick response! The sample did work! – Michael H. Sep 11 '17 at 15:27
No problem, and since you asked for an horizontal solution, simply replace flex-direction with a column, and all the heights with widths ! – Sep 11 '17 at 15:29
Will it work both way? Horizontal plus vertical scrolling with fixed header and fixed columns this way? – Michael H. Sep 11 '17 at 23:33
Sure, you can do both at the same time, just replace `overflow-y` with `overflow` in the `content` class ! – Sep 12 '17 at 06:50
I will try but my guess would be the the frozen columns will not scroll together with rest when scrolling vertically – Michael H. Sep 12 '17 at 08:43

BogdanC · Accepted Answer · 2017-09-11T16:16:54.477

You put the part of your table into one div and the scrollable one in another. On the scrollable div container you set a width or max-width and apply overflow-x: scroll or auto. This way one part will be fixed, the other will scroll.

HTML

<div class="fixed">
  //your fixed part of table here
</div>
<div class="scrollable">
  //your scrollable part of table here
</div>

CSS

.scrollable {
  overflow-x: scroll;
  width: 200px;
}

Demo plunker here

Edit

For vertical scroll you only have to limit the height of the container also and set overflow-x to scroll or, given the fact that you have both on your container, just overflow: scroll or auto.

.scrollable{
  overflow: scroll;
  width: 200px;
  height: 70px;
}

You have a working plunker here

If you want to add the sticky header is a bit more complicated, take a look at the answer here

Hi this works! Thank you! Do you also have a sample where vertical+ horizontal scrolling are working and where I can fix the header row? — Michael H., Sep 11 '17 at 15:26

How to align table with fixed columns and table with content beside each other

2 Answers2