Align header cells divs to be same hight as other divs

Question

I'm trying to make all the div's in the header column to be same hight so that content inside those divs match the height to the other divs in header.

I have added different colors to each div to better represent them, i'm looking to get the text or content inside the div to be in same line as other contents in other column of header.

  table {
    margin: 0 auto;
    border: 1px solid;
  }
  table th {
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-right: 1px solid;
    padding: 5px;
    width: 40px;
  }
  table td {
    border-bottom: 1px solid;
    border-right: 1px solid;
    padding: 5px;
  }

  .img {
    background-color: lightgreen;
  }
  .img_1 {
    height: 50px;
  }
  .img_2 {
    height: 20px;
  }
  .img_3 {
    height: 70px;
  }

  .title {
    background-color: lightpink;
  }
  .description {
    background-color: rgb(182, 255, 215);
  }
  .price {
    background-color: rgb(249, 182, 255);
  }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<table>
        <thead>
          <tr>
            <th>
              <div class="img img_1">Img</div>
              <div class="title">Title</div>
              <div class="description">Description</div>
              <div class="price">Price</div>
            </th>
            <th>
              <div class="img img_2">Img</div>
              <div class="title">Title</div>
              <div class="description">Description</div>
              <div class="price">Price</div>
            </th>
            <th>
              <div class="img img_3">Img</div>
              <div class="title">Title</div>
              <div class="description">Description Long Description</div>
              <div class="price">Price</div>
            </th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
          </tr>
          <tr>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
          </tr>
        </tbody>
      </table>

General giz of this the text inside the divs need to be same line as text in other divs in header.

https://stackoverflow.com/questions/56711501/align-child-elements-of-different-blocks — Paulie_D, Oct 08 '20 at 11:17
Why not put each element in its own `` element, assuming this is tabular data? — David Thomas, Oct 08 '20 at 11:18
@Paulie_D that looks like using Grid i'm using Table, don't have much experience with Grid, but thinking this might not work for me. Or i'm just an idiot :( — Marius, Oct 08 '20 at 11:20
My point is that you can't do this. It would indeed be more appropriate, as mentioned, for these elements to be in their own cells. — Paulie_D, Oct 08 '20 at 11:21
David yeah that my worse case scenario but then i have deal with removing borders and then padding, but using padding 0 does not work completely there is still padding on top and bottom — Marius, Oct 08 '20 at 11:21

score 0 · Answer 1 · answered Oct 08 '20 at 11:52

Without javascript, I don't think you can align the <div>s from different columns unless they're of fixed height. I'd recommend using separate table rows (<tr>) for anything you want to keep aligned:

table {
  margin: 0 auto;
  border: 1px solid;
}

table th {
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-right: 1px solid;
  padding: 5px;
  width: 40px;
}

table td {
  border-bottom: 1px solid;
  border-right: 1px solid;
  padding: 5px;
}

.img {
  background-color: lightgreen;
}

.img_1 {
  height: 50px;
}

.img_2 {
  height: 20px;
}

.img_3 {
  height: 70px;
}

.title {
  background-color: lightpink;
}

.description {
  background-color: rgb(182, 255, 215);
}

.price {
  background-color: rgb(249, 182, 255);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<table>
  <thead>
    <tr>
      <th class="img img_1">Img</th>
      <th class="img img_2">Img</th>
      <th class="img img_3">Img</th>
    </tr>
    <tr>
      <th class="title">Title</th>
      <th class="title">Title</th>
      <th class="title">Title</th>
    </tr>
    <tr>
      <th class="description">Description</th>
      <th class="description">Description</th>
      <th class="description">Description Long Description</th>
    </tr>
    <tr>
      <th class="price">Price</th>
      <th class="price">Price</th>
      <th class="price">Price</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

yep having a fixed height is one of the solutions i just wish this was dynamic so then not having the extra spaces in "Img" for example, as suggested creating more rows for these i think was the best solution, i guess other way to make the hight dynamic is to use JS to calculate and change the hight according to the content. — Marius, Oct 08 '20 at 12:23

Align header cells divs to be same hight as other divs

1 Answers1