Two actors in a cell within a table (libGDX)

Question

I want to put two actors in one cell in the table (so that they overlap each other). The number should overlap the center of the square. In other words, the squares in the table should be like a container for the numbers.

This is what I wrote so far:

table = new Table();
    table.padTop(100f);
    table.setDebug(true);

    btnLevel = new Button[50][3];
    lbl = new Label[50][3];
    for (int row = 0; row < 50; row++) {
        for (int col = 0; col < 3; col++) {
            btnLevel[row][col] = new Button(skin.getDrawable("up"), skin.getDrawable("down"));
            lbl[row][col] = new Label("" + X, style);

            // My Actors
            table.add(btnLevel[row][col]);  // square shape
            table.add(lbl[row][col]);       // number over the square

            if (col == 2) {
                table.row().pad(10f);
            }
        }
    }

How can I make one actor to overlap another actor using the table?

In other words: how can I put actor (A) in the first row in the first column (in the table), AND actor (B) int the same position of actor (A)?

Answer 1

Whenever you add something to a Table it will lead to a new Cell. These cells cannot overlap. You need to add an Actor to the cell, which has both your square shape, and the Label.

In your case, you can use a Stack.

Stack stack = new Stack();
stack.add(btnLevel[row][col]); // square shape
stack.add(lbl[row][col]); // number over the square
table.add(stack);