CSS - Rowspan Like Effect

CSS - rowspan like effect

CSS

    body {
      margin: 0;
      padding: 50px;
      background-color: #FFFFFF;
      color: #000000;
      font-family: Arial, Helvetica, sans-serif;
    }
    .tablewrapper {
      position: relative;
    }
    .table {
      display: table;
    }
    .row {
      display: table-row;
    }
    .cell {
      display: table-cell;
      border: 1px solid red;
      padding: 1em;
    }
    .cell.empty
    {
      border: none;
      width: 100px;
    }
    .cell.rowspanned {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100px;
    }

<div class="tablewrapper">
      <div class="table">
        <div class="row">
          <div class="cell">
            Top left
          </div>
          <div class="rowspanned cell">
            Center
          </div>
          <div class="cell">
            Top right
          </div>
        </div>
        <div class="row">
          <div class="cell">
            Bottom left
          </div>
          <div class="empty cell"></div>
          <div class="cell">
            Bottom right
          </div>
        </div>
      </div>
    </div>

Demo: http://www.sitepoint.com/rowspans-colspans-in-css-tables/

CSS Equivalent of Table Rowspan with Fluid Height

First of all, what you are doing looks like a table to me, so you might want to consider that. Doing it with CSS however is a bit more tricky (unless you do the table styling in CSS). The following code works but does not center vertically the text in the box:

<html><head><title>Test2</title></head><body>
<div style="width:300px; padding: 2px; border: 1px solid black;">
  <div style="float:right; width: 100px;">
    <div style="border: 1px solid black; margin-bottom: 2px;">
      Here is some sample text. And some additional sample text.
    </div>
    <div style="border: 1px solid black;">
      Here is some sample text. And some additional sample text.
    </div>
  </div>
  <div style="border: 1px solid black; margin-right: 102px;">
    <div>
      This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.
    </div>
    <div style="clear: right; margin-bottom: -1px;"></div>
  </div>
</div></body></html>

Table cells in CSS are easier:

<!DOCTYPE html>
<html><head><title>Test2</title></head><body>
<div style="display: table; width:300px; border: 1px solid black; border-spacing: 2px;">
  <div style="display: table-cell; border: 1px solid black; vertical-align: middle;">
    This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.
  </div>
  <div style="display: table-cell; width: 100px;">
    <div style="border: 1px solid black; margin-bottom: 2px;">
      Here is some sample text. And some additional sample text.
    </div>
    <div style="border: 1px solid black;">
      Here is some sample text. And some additional sample text.
    </div>
  </div>
</div>
</body>
</html>

How create create effect rowspan in table

If you want the first column to span over the complete rows, you'll have to:

Use rowspan="listCount.length".
But just the first column. To get whether the column is first, you can use let first = first in *ngFor.
Since this rowspan count will be dynamic, you'll have to use the Attribute Binding Syntax([attr.rowspan]="listCount.length").

Try this:

<tr *ngFor="let count of listCount; let first = first">
  <ng-container *ngIf="check()">
    <td *ngIf="first" [attr.rowspan]="listCount.length" ....>
    <td>..
  </ng-container>
</tr>

Here's a Sample StackBlitz for your ref.

css tables for rowspan and colspan

colspan and rowspan are not avalaible in CSS, these are really specific to real table tag/elements.

You should rethink your structure/imbrication if it has some meanings :).

DEMO

<div class="tablelayout">
  <h1 class="cell"> title</h1>
  <div class="cell ">
    <h2 class="tablelayout">subtitle</h2>
    <div class="tablelayout">
      <div class="row">
        <p class="cell"> Cell </p>
        <p class="cell"> Cell </p>
      </div>
      <div class="row">
        <p class="cell"> Cell </p>
        <p class="cell"> Cell </p>
      </div>
      <div class="row">
        <p class="cell"> Cell </p>
        <p class="cell"> Cell </p>
      </div>
    </div>
  </div>
</div>

display:table-caption is avalaible and could be used : DEMO 2

display:table-header-group; is avalaible too : DEMO 3

Row span without affecting other rows

Your rows are set to auto height.

#wrapper {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(12, minmax(0, 1fr)); <--  ignored; overruled
  grid-template-rows: auto; <-- winning rule
}

This means that the height of the first row (explicit grid) will be determined by content height.

The height of the remaining rows (implicit grid) will also be determined by the content height, because the default setting for grid-auto-rows is also auto.

It also means that a CSS Grid rule goes into effect: Free space among grid tracks with auto sizing is divided equally among them.

§ 11.8. Stretch auto
Tracks
This step expands tracks that have an auto max track sizing function
by dividing any remaining positive, definite free space equally
amongst them. If the free space is indefinite, but the grid container
has a definite min-width/height, use that size to calculate the free
space for this step instead.

So when #left1 and #left2 share the same tracks with #right1, the free space (created in the left areas because the right area is taller) is distributed equally among the left areas.

But if the #right1 area is made to span into an empty, undefined row (let's say, from grid-row: 3/5 to grid-row: 3/6) it's no longer bound to the #left1 and #left2 tracks, and the auto stretch algorithm no longer applies.

#wrapper {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto;
}

#navigation {
  grid-column-start: 1;
  grid-column-end: 13;
  background-color: #CCC;
  grid-row: 1;
}

#hero {
  grid-column-start: 1;
  grid-column-end: 13;
  background-color: #BBB;
  grid-row: 2;
}

#left1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row: 3;
  background-color: #AAA;
}

#left2 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row: 4;
  background-color: #DDD;
}

#right {
  grid-column-start: 4;
  grid-column-end: 13;
  /* grid-row: 3/5; */
  grid-row: 3/6;   /* new */
  background-color: #EEE;
}

<div id="wrapper">
  <div id="navigation">NAVIGATION</div>
  <div id="hero">HERO IMAGE</div>
  <div id="left1">Left1</div>
  <div id="left2">Left2</div>
  <div id="right">Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
    Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
    Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
    Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
    Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
    Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
    Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right </div>
</div>

HTML Table rowspan is not working correct with my CSS

This is effecting: vertical-align: baseline;

See DEMO

Values (for table cells)

baseline (and sub, super, text-top, text-bottom, , and ) Align the baseline of the cell with the baseline of all
other cells in the row that are baseline-aligned.

top Align the top padding edge of the cell with the top of the row.

middle Center the padding box of the cell within the row.

bottom Align the bottom padding edge of the cell with the bottom of the row.

More Details

CSS - Rowspan Like Effect