CODEWITHSUNDEEP
htmlcss
Florent Descroix
Florent Descroix

Reputation: 611

Table row fills remaining height Chrome vs. Firefox

I have a code that acts differently on Firefox and Chrome.

The behaviour I want is the one on Firefox. I want to reproduce it on Chrome without success.

In the following code, the idea is that the tr class="spacer" fills the remaining height below the the tr class="family" rows so they would be displayed at the top of the tr class="category" row.

On Chrome this is completely inconsistent...

.category th {
  height: 200px;
  background: red;
}

.family {
  height: 70px;
  background: blue;
}
<table>
  <tbody>
    <tr>
      <th>Category</th>
      <th>Family</th>
      <th>Info</th>
    </tr>

    <tr class="category">
      <th rowspan="3">Category 1</th>
    </tr>
    <tr class="family">
      <td>Family 1</td>
      <td>Many different things</td>
    </tr>
    <tr class="spacer">
      <td colspan="3"></td>
    </tr>

    <tr class="category">
      <th rowspan="4">Category 2</th>
    </tr>
    <tr class="family">
      <td>Family 2</td>
      <td>Other things</td>
    </tr>
    <tr class="family">
      <td>Family 3</td>
      <td>Way more things</td>
    </tr>
    <tr class="spacer">
      <td colspan="3"></td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Views: 178

Answers (2)

IFZR
IFZR

Reputation: 326

According to this example https://www.w3schools.com/tags/att_td_rowspan.asp, I rewrite your code like this. Hope this help you.

<html>

<head>
  <style>
    .custom th {
      height: 200px;
      background: red;
    }
    
    .custom td {
      height: 70px;
      background: blue;
    }
  </style>
</head>

<body>
  <table>
    <tbody>
      <tr>
        <th>Category</th>
        <th>Family</th>
        <th>Info</th>
      </tr>

      <tr class="custom">
        <th rowspan="3">Category 1</th>
        <td>Family 1</td>
        <td>Many different things</td>
      </tr>
      <!-- Add 2 spacer for enough 3 row because rowspan = 3 -->
      <tr class="spacer">
        <td colspan="3"></td>
      </tr>
      <tr class="spacer">
        <td colspan="3"></td>
      </tr>

      <tr class="custom">
        <th rowspan="4">Category 2</th>
        <td>Family 2</td>
        <td>Other things</td>
      </tr>
      <tr class="custom">
        <td>Family 3</td>
        <td>Way more things</td>
      </tr>
      <tr class="spacer">
        <td colspan="3"></td>
      </tr>
      <tr class="spacer">
        <td colspan="3"></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Upvotes: 1

Lukas
Lukas

Reputation: 106

I think the problem is how you structure your table but I have no solution using html tables.

I would rather use the css grid property. It needs a little bit more code but it provides in my Opinion more options a better responsiveness and so on.

I wrote down some code to display the same as you want with the tables. Of course you can modify the code to make it work more like you planned but it‘s a basic structure.

Html:

<div class="grid">
  <div>Category</div>
  <div>Family</div>
  <div>Info</div>

  <div class="first">
    <div class="grid-category">Category 1</div>
    <div class="family">Family 1</div>
    <div class="family">Many different things</div>
  </div>

  <div class="second">
    <div class="grid-category">Category 2</div>
    <div class="family">Family 2</div>
    <div class="family">Many different things</div>
    <div class="family">Family 3</div>
    <div class="family">Many different things</div>
  </div>
</div>

Css:

.grid-category {
  min-height: 200px;
  background: red;
}

.family {
  height: 70px;
  background: blue;
}

.grid {
  display: inline-grid;
  grid-gap: 4px;
  grid-template-columns: auto auto auto;
  grid-template-rows: 16px auto auto;
}

.first,
.second {
  display: grid;
  grid-column: 1 / 4;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
}

.grid-category {
  grid-row: 1 / 4;
}

Upvotes: 1

Related Questions