Таблица вида макета с flex, проблемы с полным с - PullRequest
Новая
       8

Таблица вида макета с flex, проблемы с полным с

0 голосов
/ 10 января 2019

Я делаю эту таблицу как макет с divs и flex, так как некоторые стили стали более сложными, мне пришлось оставить «настоящие» <table> и сделать это следующим образом. С этим вне пути.

Одна из моих основных проблем заключается в том, что table-card, table-card__head или table-card__body не становятся полной шириной для переноса строк. Я мой пример, я сделал один из рядов, чтобы иметь больше ячеек. На данный момент, чтобы быть совершенно честным, я понятия не имею, почему это так. Я был бы очень признателен за указатели.

Я тоже уроню скрипку на всякий случай 

* {
  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>

1 Ответ

0 голосов
/ 10 января 2019

Итак, я нашел способ, который прост и работает для 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...