CODEWITHSUNDEEP
htmlcss
Tobi
Tobi

Reputation: 884

Expand child div to heigh of table div parent

I know this "expanding child div to parent height"-thing is old and today we can solve things with flexbox and grids. But my problem is a bit different. I need the format of a table with dynamic width values, depending on there content. So each row should decide it's height and each column it's width based on there contents. Also the number of columns and rows is variable.

That's why I can't use flexbox or grid based layout. They are not dependent on each others width or height just of the height/width of there own children.

Also: the table has some other tags inside. Not just text!

Because of that I can't use a normal <table> tag. It's not allowed to use other html tags inside a table cell tag.

So I decided to use <div> tags and set them to tables via css.

.table {
  background: #bbbb;
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  border: 1px solid black;
  display: table-cell;
}

.content {
  background: #f005;
}
<div class="table">
    <div class="table-row">
        <div class="table-cell"><div class="content">1 / 1</div></div>
        <div class="table-cell"><div class="content">1 / 2</div></div>
        <div class="table-cell"><div class="content">1 / 3</div></div>
    </div>

    <div class="table-row">
        <div class="table-cell"><div class="content">2 / 1</div></div>
        <div class="table-cell">
            <div class="content">very long content <br /> with line break and all the stuff</div>
        </div>
        <div class="table-cell"><div class="content">2 / 3</div></div>
    </div>

    <div class="table-row">
        <div class="table-cell"><div class="content">Another very long <br /> line <br /> breaking <br /> content and ither <span>html tags</span></div></div>
        <div class="table-cell"><div class="content">3 / 2</div></div>
        <div class="table-cell"><div class="content">3 / 3</div></div>
    </div>
</div >

The challenge now is to expand all the <div class="content"> tags to the full width and height of the parent/table-cell.

Note: I can't use flexbox here because display: is already used to show the div as a table cell.

Upvotes: 0

Views: 176

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105903

Grid could also be an option and it would need less markup :

.grid {
  background: #bbbb;
  display: grid
}

.c3 {
  grid-template-columns: repeat(3, auto)
}

.shrink {
  width: max-content;
  /* behave alike a table */
  margin: auto;
}

.content {
  border: solid 1px;
  background: #f005;
  padding:0.25em;
}

.grid~.grid .content {
  margin: 2px;
  /* mimic border-spacing*/
}
<div class="grid c3 shrink">
  <!--<div class="table-row">		<div class="table-cell">-->
  <div class="content">1 / 1</div>
  <!--</div>
		<div class="table-cell">-->
  <div class="content">1 / 2</div>
  <!--</div>
		<div class="table-cell">-->
  <div class="content">1 / 3</div>
  <!--</div>	</div>	<div class="table-row">		<div class="table-cell">-->
  <div class="content">2 / 1</div>
  <!--</div>		<div class="table-cell">			-->
  <div class="content">very long content <br /> with line break and all the stuff</div>
  <!--</div>		<div class="table-cell">-->
  <div class="content">2 / 3</div>
  <!--</div>	</div>	<div class="table-row">		<div class="table-cell">-->
  <div class="content">Another very long <br /> line <br /> breaking <br /> content and ither <span>html tags</span></div>
  <!--</div>		<div class="table-cell">-->
  <div class="content">3 / 2</div>
  <!--</div>		<div class="table-cell">-->
  <div class="content">3 / 3</div>
  <!--</div>	</div>-->
</div>

<hr>

<p>cleaned up html </p>
<div class="grid c3 shrink">

  <div class="content">1 / 1</div>
  <div class="content">1 / 2</div>
  <div class="content">1 / 3</div>

  <div class="content">2 / 1</div>
  <div class="content">very long content <br /> with line break and all the stuff</div>
  <div class="content">2 / 3</div>

  <div class="content">Another very long <br /> line <br /> breaking <br /> content and ither <span>html tags</span></div>
  <div class="content">3 / 2</div>
  <div class="content">3 / 3</div>
</div>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272965

add height:100% to the content, table-cell and table

.table {
  background: #bbbb;
  display: table;
  height: 100%;
}

.table-row {
  display: table-row;
}

.table-cell {
  border: 1px solid black;
  display: table-cell;
  height: 100%;
}

.content {
  background: #f005;
  height: 100%;
}
<div class="table">
  <div class="table-row">
    <div class="table-cell">
      <div class="content">1 / 1</div>
    </div>
    <div class="table-cell">
      <div class="content">1 / 2</div>
    </div>
    <div class="table-cell">
      <div class="content">1 / 3</div>
    </div>
  </div>

  <div class="table-row">
    <div class="table-cell">
      <div class="content">2 / 1</div>
    </div>
    <div class="table-cell">
      <div class="content">very long content <br /> with line break and all the stuff</div>
    </div>
    <div class="table-cell">
      <div class="content">2 / 3</div>
    </div>
  </div>

  <div class="table-row">
    <div class="table-cell">
      <div class="content">Another very long <br /> line <br /> breaking <br /> content and ither <span>html tags</span></div>
    </div>
    <div class="table-cell">
      <div class="content">3 / 2</div>
    </div>
    <div class="table-cell">
      <div class="content">3 / 3</div>
    </div>
  </div>
</div>

Related: height: 100% for <div> inside <div> with display: table-cell

Upvotes: 1

Related Questions