Responsive Tables

[ninfaj]

It's too hard for the editor to define the correct markup for responsive Tables:

The needed markup is:

<table class="listing responsive">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-title="Firstname">Hugo</td>
            <td data-title="Lastname">Boss</td>
            <td data-title="Age">32</td>
        </tr>
        <tr>
            <td data-title="Firstname">Elisabeth</td>
            <td data-title="Lastname">Tester</td>
            <td data-title="Age">27</td>
        </tr>
    </tbody>
</table>

But the editor does something like:

<table class="listing">
    <tbody>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Hugo</td>
            <td>Boss</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Elisabeth</td>
            <td>Tester</td>
            <td>27</td>
        </tr>
    </tbody>
</table>

Maybe it's an option to "fix" the markup with css?

[ninfaj]

See #40

[href]

You mean to fix the markup with javascript?

As long as the editor actually differentiates between th/td I think it's doable. You said something about table styles in the editor? Is it possible that we always assume the 'responsive' class is set? Is there any way we can get the editor to give us a proper table? Because if the editor doesn't we have have to generate the correct structure every time the table is found in a page. Not really ideal for the browser when you are talking about a huge table, because it will be rendered twice.

Once the structure is okay, the data-title attribute is easy to set. I would suggest to have a javascript that does that in batches, yielding the control with setTimeout(0) regularly to give the browser time for rendering/ui.