Improvement in responsible tables

[lsarni]

I feel like the current behaviour of the tables on mobile isn't ideal.

Normal:

Mobile

This makes it really hard to read, especially if the column values aren't as obvious as this example.

I feel something like this will make a lot more sense (taken form here):

Or just showing the column name next to the value could be enough.

[caiotarifa]

Hi, @lsarni.

Do you have an idea how to do this without JavaScript?

If JavaScript is the only way, we can work on a separate library for this purpose.

[lsarni]

There is this codepen, I built a workaround for my case based on that but it's too hacky.

column do
  "<span class='column-title'>#{day}:</span><span class='common'> #{order.meal.menu.name}</span>".html_safe
end

#attributes_table_arbre_html_menu {
  .column-title {
    display: none !important;
  }
}

@media only screen and (max-width: 767px) {
  #attributes_table_arbre_html_menu {
    .column-title {
      display: inline !important;
      text-decoration: underline;
    }
  }
}

Web:

Mobile: