Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-39094 Make Moodle's CSS smaller
  3. MDL-40497

Add .table class to all data tables, starting with flexible tables in lib/tablelib




      Bootstrap uses a class of "table" to differentiate between tabular data and tables used for laying out webpages. There's still a couple of places Moodle does this, and even if we fixed those Moodle users will still be doing that so we still need to be able to target these data tables in CSS separately from all table tags.

      Moodle does something similar with .generaltable and .flexible. The former pops up in some odd places so it's not reliable and the latter is mostly on tables created by lib/tablelib.php so I suggest these should be replaced with .table, alongside the existing ones at first and then phase out the old ones.

      The reason this is a sub-task of Make Moodle's CSS smaller as this is one of the biggest contributers to Bootstrapbase CSS. Bootstrap has some fairly longwinded table CSS and currently we're repeating it for a bunch of table selectors. This was originally in moodle/less/table.less (and some still is) but others were moved to expendable.less since they were bloating the selector count beyond IE8&9's limits.

      Note that upgrading to Less 1.4 and using it's new @extend functionality might also limit this repetition in the CSS, but isn't quite as elegant a solution for various reasons e.g. it's doesn't reduce the number of selectors used, just the number of lines of CSS.

      The quick fix would be to alter the flexible table class so that it always adds the required class(es) where it currently adds "flexible":


      I would suggest "table table-striped" (note MDL-40237 for removing the nearby HTML for supporting the old way of table striping, still required for IE8) and intend to quickly try this by simlpy adding that string in order to measure the benefit (quick estimate: 25 selectors and 45 lines of CSS from tables.less, 56 selectors and 62 lines of CSS from expendable.less).

      This could be added to 2.5 and despite also adding those two classes to all themes, not just BootstrapBase derived ones should, I hope, not have any visual impact on existing themes.

      A better solution would be to allow the theme to specify the string of classnames to be used in a config.php theme variable. This would a) allow existing themes to default to adding no classes, b) allow people who don't like stripes, or prefer some other combination of Bootstrap table classes (table-bordered, table-hover) for example to use those, and c) allow themes based on other CSS frameworks to use their equivalent classnames e.g. YUI pure : "pure-table pure-table-horizontal pure-table-striped pure-table-bordered".

      Hopefully most tables will be using the table library, it should quickly become obvious which ones aren't and they can be fixed up one at a time.


        Issue Links



              bawjaws David Scotson
              bawjaws David Scotson
              Amy Groshek, David Scotson, Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Ilya Tregubov, Laurent David, Raquel Ortega, Sara Arjona (@sarjona), Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Ilya Tregubov, Laurent David, Raquel Ortega, Sara Arjona (@sarjona)
              0 Vote for this issue
              5 Start watching this issue