0

I want to get a table in CSS with a sticky header (only body scrolls) on Y, and whole table scrolls on X.

According to Michael_B comment on my previous question here there is a flexbox bug and I have to use inline-flex on row + width on cells to make sure my row grows correctly.

This leads me to this result:

html, body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.table {
  border: solid black;
  width: 60vw;
  height: 80vh;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
}

.header {
  border: solid cyan;
  flex: 0;
}

.body {
  flex: 1;
  overflow-y: auto;
  border: solid yellow;
  display: inline-block;
}

.row {
  border: solid red;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}

.cell {
  border: solid green;
  width: 400px;
  height: 50px;
}
<div class="table">
  <div class="header">
    <div class="row">
      <div class="cell">
        cell 1
      </div>
      <div class="cell">
        cell 2
      </div>
      <div class="cell">
        cell 3
      </div>
    </div>
  </div>
  <div class="body">
    <div class="row">
      <div class="cell">
        cell 1
      </div>
      <div class="cell">
        cell 2
      </div>
      <div class="cell">
        cell 3
      </div>
    </div>
    <div class="row">
      <div class="cell">
        cell 1
      </div>
      <div class="cell">
        cell 2
      </div>
      <div class="cell">
        cell 3
      </div>
    </div>
    <div class="row">
      <div class="cell">
        cell 1
      </div>
      <div class="cell">
        cell 2
      </div>
      <div class="cell">
        cell 3
      </div>
    </div>
  </div>
</div>

JsFiddle

As you can see it's not exactly what I want. It seems my rows do not grow according to their content size even with inline-flex, and this happens only when using a flex column layout on the table.

html, body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.table {
  border: solid black;
  width: 60vw;
  height: 80vh;
  overflow-x: auto;
}

.header {
  border: solid cyan;
  flex: 0;
  display: inline-block;
  height: 50px;
}

.body {
  flex: 1;
  overflow-y: auto;
  border: solid yellow;
  display: inline-block;
  height: calc(100% - 50px - 16px);
}

.row {
  border: solid red;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}

.cell {
  border: solid green;
  width: 400px;
  height: 50px;
}



By removing flex column, using inline-block and calc computations, I almost get the behavior I want, except I'd like the scrollY scrollbar to always stay visible
<div class="table">
  <div class="header">
    <div class="row">
      <div class="cell">
        cell 1
      </div>
      <div class="cell">
        cell 2
      </div>
      <div class="cell">
        cell 3
      </div>
    </div>
  </div>
  <div class="body">
    <div class="row">
      <div class="cell">
        cell 1
      </div>
      <div class="cell">
        cell 2
      </div>
      <div class="cell">
        cell 3
      </div>
    </div>
    <div class="row">
      <div class="cell">
        cell 1
      </div>
      <div class="cell">
        cell 2
      </div>
      <div class="cell">
        cell 3
      </div>
    </div>
    <div class="row">
      <div class="cell">
        cell 1
      </div>
      <div class="cell">
        cell 2
      </div>
      <div class="cell">
        cell 3
      </div>
    </div>
  </div>
</div>

JsFiddle

Anyone knows how I could achieve the table layout I want? I'm open for no flexbox solution but I don't want a JS based solution for now.

Improve this question
2
  • So something like this, but with the header row fixed? jsfiddle.net/wy7poh0L/7 Commented Aug 24, 2018 at 21:05
  • yes, and maybe the yellow/cyan borders adapting to their inner content (here it stays at 100% of the container) Commented Aug 26, 2018 at 14:20
Related questions
2
Flexbox layout problems - flexbox item spanning multiple rows
239
When flexbox items wrap in column mode, container does not grow its width
0
issue with flexbox columns
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.