css: ability to disable the hover effect on tables.

diff --git a/css/m-components.css b/css/m-components.css
index 3c743d2fdacc04232a0d31830fb73b424045ca27..387c45449ace803de23c5405e4a20bbed50782d1 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -712,7 +712,7 @@ table.m-table {
 div.m-scroll > table.m-table:last-child {
   margin-bottom: 0.0625rem;
 }
-table.m-table tbody tr:hover {
+table.m-table:not(.m-flat) tbody tr:hover {
   background-color: var(--line-color);
 }
 table.m-table th, table.m-table td {

diff --git a/doc/css/components-test.rst b/doc/css/components-test.rst
index 60a90da2c29466db688ca36ef0e0eb5ef1a03514..c6ce420626897f195162e60f4acc87ed0434f09a 100644 (file)
--- a/doc/css/components-test.rst
+++ b/doc/css/components-test.rst
@@ -200,36 +200,18 @@ Tables
 
 .. raw:: html
 
-    <table class="m-table m-center-t">
-      <caption>Table caption</caption>
-      <thead>
-        <tr>
-          <th>#</th>
-          <th>Heading</th>
-          <th>Second<br/>heading</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <th scope="row">1</th>
-          <td>Cell</td>
-          <td>Second cell</td>
-        </tr>
-      </tbody>
-      <tbody>
-        <tr>
-          <th scope="row">2</th>
-          <td>2nd row cell</td>
-          <td>2nd row 2nd cell</td>
-        </tr>
-      </tbody>
-      <tfoot>
-        <tr>
-          <th>&Sigma;</th>
-          <td>Footer</td>
-          <td>Second<br/>footer</td>
-        </tr>
-      </tfoot>
+    <table class="m-table m-flat">
+      <caption>Flat table (w/o hover effect)</caption>
+      <tr>
+        <th scope="row">1</th>
+        <td>Cell</td>
+        <td>Second cell</td>
+      </tr>
+      <tr>
+        <th scope="row">2</th>
+        <td>2nd row cell</td>
+        <td>2nd row 2nd cell</td>
+      </tr>
     </table>
     <div class="m-scroll"><table class="m-table m-fullwidth">
       <caption>Full-width table</caption>

diff --git a/doc/css/components.rst b/doc/css/components.rst
index 13b2845d550d995b2261fe43cfc312c6edc4c526..458ced1cf0e6a70fa3af3d7fdc1a6461a314dec9 100644 (file)
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -412,9 +412,9 @@ of surrounding text.
 
 Use :css:`.m-table` to apply styling to a table. The table is centered by
 default; rows are separated by lines, with :html:`<thead>` and :html:`<tfoot>`
-being separated by a thicker line. Rows are highlighted on hover, :html:`<th>`
-is rendered in bold, all :html:`<th>` and :html:`<td>` are aligned to left
-while table :html:`<caption>` is centered. Example table:
+being separated by a thicker line. The :html:`<th>` element is rendered in
+bold, all :html:`<th>` and :html:`<td>` are aligned to left while table
+:html:`<caption>` is centered. Example table:
 
 .. code-figure::
 
@@ -469,8 +469,6 @@ while table :html:`<caption>` is centered. Example table:
               <td>Cell</td>
               <td>Second cell</td>
             </tr>
-          </tbody>
-          <tbody>
             <tr>
               <th scope="row">2</th>
               <td>2nd row cell</td>
@@ -486,8 +484,10 @@ while table :html:`<caption>` is centered. Example table:
           </tfoot>
         </table>
 
-Similarly to other components, you can color particular :html:`<tr>` or
-:html:`<td>` elements using the color classes from above:
+Rows are highlighted on hover, if you want to disable that, put :css:`.m-flat`
+CSS class on the :html:`<table>` element. Similarly to other components, you
+can color particular :html:`<tr>` or :html:`<td>` elements using the color
+classes from above:
 
 .. raw:: html