Colspan / Rowspan для элементов, для отображения которых задано значение table-cell

Question

Colspan / Rowspan для элементов, для отображения которых задано значение table-cell

У меня есть следующий код:

<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan2">Cell</div>
    </div>
</div>

<style>
    .table {
        display: table;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
    }
    .colspan2 {
        /* What to do here? */
    }
</style>

Довольно просто. Как добавить colspan (или эквивалент colspan) для элементов с display: table-cell ?

104

html css

задан Madara Uchiha 7 November 2013 в 12:49

1 ответ

Другие вопросы по тегам:

html css

Похожие вопросы:

score 0 · Answer 1

Это может быть сделано только с чистым CSS и центрированием текста через "фальшивку" colspan.

прием должен установить строки на position:relative, затем для размещения "пустых отделений" в row, где Вы хотите сделать colspan (они должны иметь height для работы), установите cell, где содержание находится в как display:grid, и наконец, применяясь position:absolute к элементу в ячейке (и центрируйте его, как можно центрировать любой другой абсолютный элемент).

 .table {
        display: table;
  }
  .row {
      display: table-row;
      position: relative;
  }
  .cell {
      display: table-cell;
      background-color: blue;
      color: white;
      height: 26px;
      padding: 0 8px;
  } 
  .colspan2 {
      display: grid;
  }
  .colspan2 p {
    position:absolute;
    left: 50%;
    transform:translateX(-50%);
    margin: 0;
  }

<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan2"><p>Cell</p></div>
        <div class="cell"></div>
    </div>
</div>