#Having trouble with making tables the same height.

13 messages · Page 1 of 1 (latest)

lyric oar
#

See images for what I mean.

So as the title says, I'm having trouble making these tables equal height. I thought this wouldn't be a hard fix, but I couldn't manage to get it to work.

Desired outcome:
I want for the second rows in both of the small tables from the image to keep going, even if empty, until the table is the same height as the longer table.

The wikitext code:
All of these tables are inside 2 divs in pairs like this:

<div style="display: flex; flex-wrap: wrap; gap: 5px;">
  <div style="flex: 1;display:inline-grid">
    --Table here
  </div>
  <div style="flex: 1; display:inline-grid;">
    --Second table here
  </div>
</div>

What I tried:
So far I tried putting these into all divs separately (and all at the same time), but none of them had any visible effect:
justify-content: stretch;
justify-items: stretch;
justify-self: stretch;
align-items: stretch;
align-self: stretch;
Changing display types to table, table-row, table-column
Setting height:100% in divs and tables themselves
Setting min-height but it makes the table look weird and it'd only work for specific screens

Sorry if this may be a straightforward answer, but I'm really lost here. I'm new to wikitext (and htlm/css at that) so I decided to ask here since it's the only place I know where people can help me.

image.png image.png
tender mist
#

get rid of the divs directly wrapping the tables

<div style="display: flex;gap: 5px;">
{| class="wikitable" style="width:100%"
! style="height:0"|table
|-
|
*aa
*a
*a
*a
*a
|}
{| class="wikitable" style="width:100%"
! style="height:0"|table
|-
|aaaaaa
|}
</div>```
(making the header cells height:0 make it so it doesnt vertically stretch that cell, otherwise it stretches both cells equally)
image.png
lyric oar
tender mist
#

strange

#

ohhh inspect element and see if the skin itself adds a wrapper around the tables?

lyric oar
tender mist
#

yeah i thought so
can u send a link, would make it a lot easier for me to poke around and try some things

lyric oar
# tender mist yeah i thought so can u send a link, would make it a lot easier for me to poke a...

https://ocria.miraheze.org/wiki/Main_Page

Ocria
Main Page

Welcome to Ocria, a fictional world created by MyNames 55 as a passion project, and this wiki will include all information about it, such as nations, languages, peoples, religions, etc. More info about the world itself can be seen on the Ocria's article.
You can also contribute to it by adding or expanding articles. You can add your own details ...

lyric oar
tender mist
# 
.content-table {
  display:flex;
  height:100%
}```add this to common.css
lyric oar
#

done