How to create table with different number of cells in the rows?

Question

My idea in general: I have HTML Table with custom rows inside. This is similar example: enter image description here

2nd cell in 1st row - Shold be about 40% of row and 6th cell of 1st row should be a double

8th cell of 2nd row should be big ~ 40%

Basically this 2 rows repeats in my table. Each 2nd row collapsible and it collapse on click in first cell of 1st row. The problem is when I collapse and back my table changes the size of columns and my screen jumps all the time. I want this rows to be always the same structure, but since I have response design I don't want to set exact width for each cell.

I've tried a dozen of variant with colspan and % of width, but nothing work for me. this is my latest result:

<tr class="mattersRow">

    <td colspan="4">
        <a href="#collapse63" data-toggle="collapse"></a>
    </td>
    <td class="editableCell qbmatter" colspan="14"></td>
    <td class="editableCell workDate" colspan="4"></td>
    <td class="editableCell hours" colspan="2"></td>
    <td class="editableCell person" colspan="6"></td>
    <td class="rate" colspan="2"></td>
    <td class="editableCell amount" colspan="4"></td>
    <td align="center"></td>

</tr>
<tr id="collapse63" class="helpRow in" style="height: auto;">

    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="4"></td>
    <td colspan="2"></td>
    <td colspan="4"></td>
    <td colspan="2"></td>
    <td colspan="16"></td>
    <td colspan="4"></td>

</tr>

Can you help me to build this rows properly...

Does it have to be Tables? Div's are more modern and can do this much easier, although you can acheive what you're after with NESTED TABLES. As in, the smaller rows should be their own tables inside the parent table. — Mike, Jan 07 '14 at 21:23

score 1 · Accepted Answer · edited Jan 07 '14 at 21:57

You're on the right track, but tables are designed to have rows and columns end at the same spots, so that little bit of extra space to the right of the 2nd cell in the first row, is either something that will be a ton of work to replicate, or will just be much easier to have them line up. Otherwise you'll start getting into nested tables and it will be more work than it's worth. You could always use a table building generator like TableGenerator

score 0 · Answer 2 · answered Jan 07 '14 at 21:23

0

To get that sort of variation you need to have 2 different tables since it will try and align the td's

answered Jan 07 '14 at 21:23

0xFADE

832
5
7

score 0 · Answer 3 · edited May 23 '17 at 12:33

0

I would highly suggest putting those into divs with styling. It's pretty clear that you're not using them for tabular data - since you're using it for layout I suggest looking at this question here. This could be achieved relatively easily with some simple css.

edited May 23 '17 at 12:33

Community

1
1

answered Jan 07 '14 at 21:23

kddeisz

5,162
3
21
44

How to create table with different number of cells in the rows?

3 Answers3