CODEWITHSUNDEEP
htmlcsshtml-table
Lord Farquaad
Lord Farquaad

Reputation: 707

Stretch table to vertically fit TD

I am placing a table inside a td. By setting width:100%, I can get the table to stretch horizontally, but I have not been able to do the same vertically. No matter what I've tried, the table will have the minimum height necessary to contain its contents.

Below is the structure of the table

table {
    border-collapse: collapse;
    border-spacing: 2px;
    border-color: black;
}
td {
    border: 1px solid #ddd;
    background: #f2f5f7;
}
<table >
  <tbody>
    <tr>
      <td rowspan="2" style="background-color:#ff0000"/>
  
        <table>
          <tr>
            <td>A</td>
            <td>B</td>
          </tr>
          <tr>
            <td>C</td>
            <td>D</td>
          </tr>
        </table>
        
      <td><br>Extra<br></td>
    </tr>
    <tr>
      <td>Space<br><br></td>
    </tr>
    </table>

I am trying to get rid of the red areas above and below the ABCD table. I've tried solutions from dozens of various questions, and I thought this would be straightfoward, but nothing has worked.

I have tried (in various permutations):

None of these have affected the height of the table.

The most promising result so far: setting the height to a pixel value (like height:100px does change the height of the table. Unfortunately, the necessary height of the table will change based on factors outside of my knowledge/control. I'm looking for a programmatic solution to this issue.

(NOTE: I know how to use JS to grab the height of the neighboring cells and set the height of the trs in the nested table after the page loads. However, I don't have a guarantee that JS will be executable, so this is my last resort.)

Upvotes: 2

Views: 630

Answers (1)

Hunter Turner
Hunter Turner

Reputation: 6894

Here is a solution that I've created using CSS Grid.

.grid-table {
  display: grid;
  grid-template-columns: repeat(3, minmax(50px, 1fr));
  background-color: #fff;
  color: #444;
  max-width: 800px;
  background-color: #ccc;
}

.grid-table > .row:not(:last-of-type) {
  border-bottom: 1px solid #ddd
}

.row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(50px, 1fr));
  align-items: center;
}

.row > .box:not(:last-of-type) {
  border-right: 1px solid #ddd;
}

.box {
  height: 100%;
  display: flex;
  align-items: center;
}

.box-item {
  padding: 5px;
}
<div class="grid-table">
  <!-- Table Row -->
  <div class="row">
    <div class="box">
      <div class="box-item">Column 1</div>
    </div>
    <div class="box">
      <div class="box-item">Column 2</div>
    </div>
    <div class="box">
      <div class="box-item">Column 3</div>
    </div>
  </div>
  
  <!-- Table Row -->
  <div class="row">
    <div class="box">
      <div class="box-item">A</div>
    </div>
    <div class="box">
      <div class="box-item">B</div>
    </div>
    <div class="box">
      <div class="box-item">Extra<br>Space</div>
    </div>
  </div>
  
  <!-- Table Row -->
  <div class="row">
    <div class="box">
      <div class="box-item">C</div>
    </div>
    <div class="box">
      <div class="box-item">D</div>
    </div>
    <div class="box">
      <div class="box-item">Extra<br>Space</div>
    </div>
  </div>
</div>

With this solution, the height of the individual columns will always be the height of the tallest column. You can control whether you want the rows to be centered or not by modifying the align-items attribute within the .box class.

JSFiddle

Upvotes: 1

Related Questions