0

I have 3 tables on my homepage that are in a row, I am using CSS grid to display it this way. Each of 3 tables will have a varying amount of table rows: first one has 9, second has 7 and third has 6.

In Chrome and Safari, the tables seem to be displaying perfectly fine and are respecting the height that I have applied to each <tr>, but there seems to be an issue in Firefox.

Whatever the height is of the left hand table (with 9 rows) the other two tables will increase their height to match that of the table on the left, as seen here: https://i.postimg.cc/7L5TrmzH/1.jpg

Does anyone have any ideas about why this might be happening?

Link to site is here: http://testing.mobnetwork.co.uk/index.html

Thank you in advance.

Kate Orlova
  • 3,225
  • 5
  • 11
  • 35
Nick Cave
  • 1

1 Answers1

1

Add the following CSS to your .resource-table class

align-self: flex-start;

This property is used to set alignment for grid items. More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self

Anders L
  • 67
  • 4