Table display compromised in responsive layout

[wimrijnders]

Hi there,

I have an issue with the usage of align-column within a responsive layout.

I have a table defined as follows:

<table class="best_svm_table">
  <tbody>
    <tr class="header">
      <th>Precision</th>
      <th>Recall</th>
      <th class="hide_tablet">Accuracy</th>
      <th class="hide_tablet">Num Generic</th>
      <th class="hide_mobile">Signal To Noise</th>
      <th class="second">Iterations</th>
    </tr>
    <tr>
      <td>70.00%</td>
      <td>15.02%</td>
      <td class="hide_tablet">64.91%</td>
      <td class="hide_tablet">2</td>
      <td class="hide_mobile">0.00000</td>
      <td class="it_numbers"><a class="iteration_number">85</a></td>
    </tr>
    ...
  </tbody>
</table>

This is in a responsive layout. The classes hide_tablet and hide_mobile serve to hide given columns when the screen width drops below a certain threshold value. This worked fine before I added align-column.

After the table has been created and filled, I run:

control.find(".best_svm_table").alignColumn([0, 1, 2, 3, 4])

This converts the previous HTML-table to the following:

<table class="best_svm_table" style="border-collapse: collapse;">
  <tbody>
    <tr class="header">
      <th colspan="2">Precision</th>
      <th colspan="2">Recall</th>
      <th class="hide_tablet" colspan="2">Accuracy</th>
      <th class="hide_tablet" colspan="2">Num Generic</th>
      <th class="hide_mobile" colspan="2">Signal To Noise</th>
      <th class="second">Iterations</th>
    </tr>
    <tr>
      <td style="text-align: right; padding-right: 0px; border-right-style: none;">70</td>
      <td class="added" style="text-align: left; padding-left: 0px; border-left-style: none;">.00%</td>
      <td style="text-align: right; padding-right: 0px; border-right-style: none;">15</td>
      <td class="added" style="text-align: left; padding-left: 0px; border-left-style: none;">.02%</td>
      <td class="hide_tablet" style="text-align: right; padding-right: 0px; border-right-style: none;">64</td>
      <td class="added" style="text-align: left; padding-left: 0px; border-left-style: none;">.91%</td>
      <td class="hide_tablet" style="text-align: right; padding-right: 0px; border-right-style: none;">2</td>
      <td class="added" style="text-align: left; padding-left: 0px; border-left-style: none;"></td>
      <td class="hide_mobile" style="text-align: right; padding-right: 0px; border-right-style: none;">0</td>
      <td class="added" style="text-align: left; padding-left: 0px; border-left-style: none;">.00000</td>
      <td class="it_numbers"><a class="iteration_number">85</a></td>
    </tr>
    ...
    </tr>
  </tbody>
</table>

What is apparent, is that any cells with numbers in them are split into two cells, with extra style info for each. This works just fine in the large screen width, but as the width is decreased, the layout goes awry.

The thing here is that the added cells, marked with class="added" do not inherit the class used by the responsive layout. I.e., in order for the responsive layout to work, the sixth column of the second row in the previous code block should have read:

      <td class="hide_tablet added" ...>>.91%</td>

My request is: is it possible for the added column to inherit the original classes for a given column as well? Perhaps there's an overriding reason not to implement this, in which case I would appreciate a suggestion for a workaround.

Thanks.

[wimrijnders]

After some thought, I came up with my own workaround:

control.find(".best_svm_table").alignColumn([0, 1, 2, 3, 4]);
control.find(".best_svm_table td.hide_tablet").next().addClass("hide_tablet");
control.find(".best_svm_table td.hide_mobile").next().addClass("hide_mobile");

I.e. find all tr-elements in the tables with either class hide_tablet or hide_mobile and give said class to the immediate next tr-element.

It's neither pretty nor perfect, but it's just two lines of code, so I can live with it. Hence, a fix for this within the plugin is not a pressing matter any more.

But I do wonder, is this something that can be fixed more generally within the plugin itself? Would like to hear your views on this.

[wimrijnders]

I'll close this issue now because my own workaround has proven itself over time. I hope it is of use to anyone running into the same problem.

[ndp]

I'm sorry. I accidently had turned off all my notifications to github issues, and am just now catching up. This seems like a real issue and I can do what you are suggesting-- at least as on option. More to come.

[wimrijnders]

OK, fine with me!