Align tables inside table

Question

I have a table containing another table in order to get multiple rows inside a td element. I would like to align the cells Some, thing A with Something A and
Some, thing B with Something B so that they have the same height.

td { border: 1px solid black; }

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td>
            Some
          </td>
          <td>
            thing A
          </td>
        </tr>
        <tr>
          <td>
            Some
          </td>
          <td>
            thing B
          </td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td>
            Something A<br />bigger
          </td>
        </tr>
        <tr>
          <td>
            Something B<br />bigger
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Desired result should look like this

Is this for layout reasons (then don't use a ``), or for tabular data (in which case a `
` is fine)? — David Thomas, May 17 '21 at 13:38
Its for data display. I already got a very large table structure and have to adjust it. I dont want to restructure the whole thing, it would be to much work. — flappix, May 17 '21 at 13:40
Can you share some of that - or representative, similar - data so we can see see how it should look? Nesting tables seems like a bad idea when `colspan` and `rowspan` attributes exist on the [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) and ``, elements. — David Thomas, May 17 '21 at 13:43
@flappix I suggest you should drop idea of nesting tables because some how this is going to create problems in future. — Sandeep K Goyal, May 17 '21 at 13:45
@SandeepKGoyal what's the alternative? Replacing the inner table with divs does not solve the problem, I still need a way to align them. Using colspan and rowspan might work but my table is so huge that this is not practical — flappix, May 17 '21 at 14:38
Not divs use row span and column span. Give me some time gonna share u code. — Sandeep K Goyal, May 17 '21 at 15:28

score 1 · Answer 1 · answered May 17 '21 at 13:49

Flexbox should help.

My answer is inpired by this SO answer

td { border: 1px solid black; }

#outer-row {
  display: flex;
}

.outer-cell {
  flex: 1;
}

<table id="outer-table">
  <tr id="outer-row">
    <td class="outer-cell">
      <table class="inner-table">
        <tr>
          <td>
            Some
          </td>
          <td>
            thing A
          </td>
        </tr>
        <tr>
          <td>
            Some
          </td>
          <td>
            thing B
          </td>
        </tr>
      </table>
    </td>
    <td class="outer-cell">
      <table class="inner-table">
        <tr>
          <td>
            Something A<br />bigger
          </td>
        </tr>
        <tr>
          <td>
            Something B<br />bigger
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Thanks for your answer but unfortunately its not working. When I add lines to the right table like ```Something A
bigger
even bigger``` its still not aligned with the left table. I guess your example is working because of some padding which comes with flexbox so ```thing A``` gets wrapped into two lines. — flappix, May 17 '21 at 14:30
@flappix I was afraid of that. Any chance you could make your sample code a bit more complex so that it matches your situation better? — Joshua Swain, May 17 '21 at 14:40

Align tables inside table

1 Answers1