Respect colspan attr and multiple header rows

[falconx]

This also fixes https://github.com/jerrylow/basictable/issues/2

[jerrylow]

Thanks @falconx, this works well for #2 and doesn't break what's currently there. What colspan scenario does this work with? I just tried it with a colspan and in mobile ending up with:

[jerrylow]

@falconx I just pushed a fix for #2 incorporating your duplicate fix and also tfoot support. I moved the cell setup out so you'll have the conflict. https://github.com/jerrylow/basictable/commit/b37d54e50859965ad7d87f12137c7348be564a49#diff-b81dffe73834e2258936b580d847ca2aR50

I'd like to see what's going on with the colspan and get that in as well.

[falconx]

Nice. I'd like to see two things:

• Considering the colspan attribute
• Concatenating multiple header rows

I'll see what I can do against the latest code.

The test case I'm working with roughly resembles this:

<table>
    <thead>
        <tr>
            <th scope="row">Header row 1</th>
            <td colspan="2">Header 1A</td>
            <td colspan="2">Header 1B</td>
        </tr>
        <tr>
            <th scope="row">Header row 2</th>
            <td>Header 2A</td>
            <td>Header 2B</td>
            <td>Header 2C</td>
            <td>Header 2D</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Content row 1</th>
            <td>Content 1A</td>
            <td>Content 1B</td>
            <td>Content 1C</td>
            <td>Content 1D</td>
        </tr>
        <tr>
            <th scope="row">Content row 2</th>
            <td>Content 2A</td>
            <td>Content 2B</td>
            <td>Content 2C</td>
            <td>Content 2D</td>
        </tr>
    </tbody>
</table>

[falconx]

A simpler test case for checking colspan support against would look like this:

<table>
    <thead>
        <tr>
            <th>Header 1A</th>
            <th colspan="2">Header 1B</th>
            <th>Header 1C</th>
        </tr>
        <tr>
            <th>Header 2A</th>
            <th>Header 2B</th>
            <th>Header 2C</th>
            <th>Header 2D</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content 1A</td>
            <td>Content 1B</td>
            <td>Content 1C</td>
            <td>Content 1D</td>
        </tr>
        <tr>
            <td>Content 2A</td>
            <td>Content 2B</td>
            <td>Content 2C</td>
            <td>Content 2D</td>
        </tr>
    </tbody>
</table>

[falconx]

I got as far as this https://gist.github.com/falconx/d64ec0e658cdcdedc504 which fixes the scenario above however, it falls down for:

• th defined in tbody tr
• mixing td and th inside a tr
• doesn't handle colspan inside tbody

One example:

<table>
    <tbody>
        <tr>
            <th scope="col">Header 1A</th>
            <th scope="col">Header 1B</th>
            <th scope="col">Header 1C</th>
        </tr>
        <tr>
            <td>Content 1A</td>
            <td>Content 1B</td>
            <td>Content 1C</td>
        </tr>
    </tbody>
</table>

Unfortunately I won't have any longer to work on this but hopefully you can extract some logic from my gist to tackle some of these is issues one by one. Given the flexibility of table markup I'm finding it difficult to cover all scenarios.

[jerrylow]

@falconx Thanks, I'll test and work off of your PR.