0

I'm doing this table like layout with divs and flex as some styling got more complicated I had to leave "real" <table> behind and do it like this. With that out the way.

One of my main issues here is that table-card, table-card__head or table-card__body does not become full width to wrap the rows. I'm my example I made one of the rows to have more cells. At this point to be perfectly honest, I have no idea on why this is. I would highly appreciate pointers.

I'll drop a fiddle as well just in case

* {
  box-sizing: border-box;
}


/* plage specific */

.table-card__cell-width .table-card__head-cell,
.table-card__cell-width .table-card__cell {
  width: 11.25rem;
}


/* shared styles */

.table-card {
  position: relative;
}

.table-card__head {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

.table-card__head-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: coral;
}

.table-card__head-cell {
  border-right: 1px solid aqua;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
}

.table-card__body {
  flex: 1 0 100%;
}

.table-card__row {
  flex-shrink: 0;
  display: flex;
  flex-wrap: nowrap;
  background-color: white;
  border-bottom: 1px solid #cccccc;
}

.table-card__row:nth-child(odd) {
  background-color: #ededed;
}

.table-card__cell {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  height: 4rem;
  border-right: 1px solid #cccccc;
}
<div class="table-card">
  <div class="table-card__head table-card__cell-width">
    <div class="table-card__head-row">
      <div class="table-card__head-cell">Head 1</div>
      <div class="table-card__head-cell">Head 2</div>
      <div class="table-card__head-cell">Head 3</div>
      <div class="table-card__head-cell">Head 4</div>
    </div>
  </div>

  <div class="table-card__body table-card__cell-width">
    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>
  </div>
</div>
Dejan.S
  • 18,571
  • 22
  • 69
  • 112
  • Have you tried the same layout using css-grid? Grid is " dimensional, flex box is not... – swift-lynx Jan 10 '19 at 09:44
  • @swiftlynx sure I thought about it, still I have to make a fallback solution as browser support is ie11 – Dejan.S Jan 10 '19 at 09:50
  • You can support ie 11 with grid, it is just named differently and you need to prefix it with -ms-. https://stackoverflow.com/a/45787093/10551293 – swift-lynx Jan 10 '19 at 10:00
  • @swiftlynx Yea I know. Grid is far more complex in ie11 then docs show. There are limitations and some things are not supported. Flex should do the job here as it is "just" row based when it will be a loop of tabular data. Do you have a solution for it with grid? – Dejan.S Jan 10 '19 at 10:06
  • The only viable solution I see right now would be to set `overflow : auto;` to the rows.. – Jake Jan 10 '19 at 10:16
  • Or to set a width on the container equivalent to the number of cells via JS or other – Jake Jan 10 '19 at 10:25
  • @Jake overflow disables me to scroll on X-axis. I'm trying hard to avoid the js part in this. – Dejan.S Jan 10 '19 at 11:26
  • I meant to set `overflow: auto` on `.table-card__row`, it will enable scroll on the X-axis of the longer rows only while keeping the other functionnalities. – Jake Jan 10 '19 at 12:12
  • @Jake Strange, that is what I did, have you tried it? But in theory it would only allow for that row to scroll, or am I missing something? – Dejan.S Jan 10 '19 at 12:16
  • I have tried it, it works fine, it will only show a scrollbar on a row that is bigger than its container. Here is an [updated version of your fiddle](http://jsfiddle.net/t3ajoy5p/1/) – Jake Jan 10 '19 at 12:49
  • @Jake ah, strange that it did not work for me. Thanks for the help but it's not what I'm looking for, I need the full "table" to scroll. No worries though I solved it, you can check the answer below. – Dejan.S Jan 10 '19 at 13:00
  • Congrats on finding a solution, I really wanted it to work with flexbox though ;) – Jake Jan 10 '19 at 13:02
  • @Jake it still do, well except for the container that is using the grid for it to wrap :) – Dejan.S Jan 10 '19 at 13:03
  • Thanks, I hadn't noticed, I thought you had switched everything to grid ^^ – Jake Jan 10 '19 at 13:43

1 Answers1

0

So I did figure a way that is simple and works for ie11. 

.table-card {
  position: relative;
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr;
}


* {
  box-sizing: border-box;
}

/* plage specific */
.table-card__cell-width .table-card__head-cell,
.table-card__cell-width .table-card__cell {
  width: 11.25rem;
}

/* shared styles */
.table-card {
  position: relative;
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr;
}

.table-card__head {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

.table-card__head-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: coral;
}

.table-card__head-cell {
  border-right: 1px solid aqua;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
}

.table-card__row {
  display: flex;
  flex-wrap: nowrap;
  background-color: white;
  border-bottom: 1px solid #cccccc;
}
.table-card__row:nth-child(odd) {
  background-color: #ededed;
}

.table-card__cell {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4rem;
  border-right: 1px solid #cccccc;
}
<div class="wrapper">
  <div class="table-card">
    <div class="table-card__head table-card__cell-width">
      <div class="table-card__head-row">
        <div class="table-card__head-cell">Head 1</div>
        <div class="table-card__head-cell">Head 2</div>
        <div class="table-card__head-cell">Head 3</div>
        <div class="table-card__head-cell">Head 4</div>
      </div>
    </div>

    <div class="table-card__body table-card__cell-width">
      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>
    </div>
  </div>
</div>
Dejan.S
  • 18,571
  • 22
  • 69
  • 112