LibGDX Scene2d UI: Table inside table layout problems

Question

I'm trying to do the following layout with this code (the widths and heights are just for debug, ideally I would have both of the tables have 50% of the width. Also the superclass is a Table)

left().top()
add(Label("Player name", UI_SKIN)).center().expandX()
row()
add(Table()).width(50f).height(50f)
add(Table()).width(200f).height(50f)
setDebug(true, true)

Which results in this, for some reason the tables don't seem to go on their own row, and instead the last table pushes the label to the left. If I only add one table it works fine (can't add another screenshot because I don't have enough rep...).

Any help would be greatly appreciated, I'm running out of ideas by now.

Answer 1

You can do in this way

stage= Stage()
Gdx.input.setInputProcessor(stage)

var skin= Skin(Gdx.files.internal("skin/glassy-ui.json"))

var table= Table()
table.defaults().pad(10F)
table.setFillParent(true)

var label=Label("PLAYER NAME",skin)
label.setAlignment(Align.center);

var first_table=Table()
first_table.setDebug(true)
first_table.add(Label("FIRST TABLE",skin))

val second_table=Table()
second_table.add(Label("SECOND TABLE",skin))

table.add(label).colspan(2).fillX()
table.row();
table.add(first_table).expand()
table.add(second_table).expand()

stage.addActor(table)
stage.setDebugAll(true)

And the output is :