Замена для rowspan с css

Привет,

Я пытаюсь заменить свою таблицу на divs и CSS, но я не могу найти способ имитировать атрибут rowspan. Это мой исходный код:

<table>
 <tr>
  <td>some content</td>
  <td>some more content</td>
  <td rowspan="2">THIS is A COLUMN</td>
 </tr>
 <tr>
  <td colspan="2">SINGLE CELL ROW</td>
 </tr>
</table>

с CSS:

<header>
 <section>
  <div>some content</div>
  <div>some more content</div>
  <div rowspan="2">THIS is A COLUMN</div>
 </section>
 <section>
  <div>SINGLE CELL ROW</div>
 </section>
</header>

header {display:table;}
section {display:table-row;}
div {display:table-cell;}

но это не будет работать, потому что div в нижней части не будет идти полностью ниже развернутого div, как ожидалось. Есть ли какое-либо решение CSS для этого?

Спасибо!.

Это не дубликат. Я прошу ROWSPAN не только colspan.

3 ответа

  1. .parent{
      display: flex;
      align-items: center;
      width: 100%;
    }
    
    .child{
      display: flex;
      flex-direction: column;
      border: 1px solid #444;
    }
    
    .row{
      display: flex;
    }
        <div class="parent">
      <div class="child">
        <div class="row">
          <div>some content</div>
          <div>some more content</div>
        </div>
        <div class="row">
           <div>SINGLE CELL ROW</div>
        </div>
      </div>
      <div class="child">
        <div class="row">
          <div>THIS is A COLUMN</div>
        </div>
      </div>
    </div>

    Надеюсь, это то, что вы ищете

  2. Вы можете достичь желаемого, изменив HTML-разметку и используяFlexbox

    *,
    *::before,
    *::after {
      box-sizing: border-box
    }
    body {
      margin: 0
    }
    table {
      width: 100%;
      border-collapse: collapse
    }
    td {
      border: 1px red solid
    }
    header {
      display: flex
    }
    section {
      flex: 1;
      font-size: 0;
    }
    section > div {
      border: 1px solid green;
      font-size: 16px
    }
    section:first-of-type div {
      border-right: 0
    }
    section:first-of-type div:not(:last-of-type) {
      width: 50%;
      display: inline-flex;
      border-bottom: 0;
    }
    section:last-of-type div {
      height: 100%;
      align-items: center;
      display: flex
    }
    <h2>TABLE</h2>
    <table>
      <tr>
        <td>some content</td>
        <td>some more content</td>
        <td rowspan="2">THIS is A COLUMN</td>
      </tr>
      <tr>
        <td colspan="2">SINGLE CELL ROW</td>
      </tr>
    </table>
    
    <br />
    <hr />
    
    <h2>DIV</h2>
    
    <header>
      <section>
        <div>some content</div>
        <div>some more content</div>
        <div>SINGLE CELL ROW</div>
      </section>
      <section>
        <div>THIS is A COLUMN</div>
      </section>
    </header>

  3. Чтобы сделать эту таблицу в flexbox, можно обернуть каждую деталь, которая образует строку или столбец

    <div>
      <div>
        <div>
          <div>some content</div>
          <div>some more content</div>
        </div>
        <div>THIS is A COLUMN</div>
      </div>
      <div>SINGLE CELL ROW</div>
    </div>
    

    Затем вы можете строить nowrapстроки и столбцы с помощью flexbox, чтобы они напоминали вашу таблицу

    body div { border: 1px solid #999; margin: 0; }
    body > div { display: flex; flex-flow: row nowrap; margin-top: 10px; }
    body > div > div { display: flex; flex-flow: column nowrap; flex: 1 1 0; }
    body > div > div > div { display: flex; flex-flow: row nowrap; flex: 1 1 1;}
    body > div > div > div > div { flex: 1 1 0; }
    

    Планкер: http://plnkr.co/edit/oo5UrUMgI85myujt5L6s?p=preview