doc: highlight pointed column in NIC overview table

Every cells of a driver column are painted in yellow.

The trick is to generate some empty content as a big column
above and below the pointed cell.

The position: relative attribute is used for the highlight position
but it makes the border to disappear.

The overflow: hidden attribute is used to mask the generated content
outside of the table.

The class .wy-nav-content has a background which masks the highlighting.
Setting an opacity lower than 1, creates a new stack context and let
the column highlight to be shown.

The background of odd rows was grey and opaque. It is redefined with
a transparent alpha ratio in order to see highlighting on such rows.

Signed-off-by: Thomas Monjalon <thomas.monjalon@6wind.com>
Acked-by: Ferruh Yigit <ferruh.yigit@intel.com>
Acked-by: John McNamara <john.mcnamara@intel.com>

diff --git a/doc/guides/nics/overview.rst b/doc/guides/nics/overview.rst
index a8a8f26..afb6503 100644 (file)
--- a/doc/guides/nics/overview.rst
+++ b/doc/guides/nics/overview.rst
@@ -53,8 +53,12 @@ Most of these differences are summarized below.
 .. raw:: html
 
    <style>
+      .wy-nav-content {
+         opacity: .99;
+      }
       table#id1 {
          cursor: default;
+         overflow: hidden;
       }
       table#id1 th, table#id1 td {
          text-align: center;
@@ -76,6 +80,24 @@ Most of these differences are summarized below.
          padding-left: 1em;
          text-align: left;
       }
+      table#id1 tr:nth-child(2n-1) td {
+         background-color: rgba(210, 210, 210, 0.2);
+      }
+      table#id1 th:not(:first-child):hover,
+      table#id1 td:not(:first-child):hover {
+         position: relative;
+      }
+      table#id1 th:not(:first-child):hover::after,
+      table#id1 td:not(:first-child):hover::after {
+         content: '';
+         height: 6000px;
+         top: -3000px;
+         width: 100%;
+         left: 0;
+         position: absolute;
+         z-index: -1;
+         background-color: #ffb;
+      }
       table#id1 tr:hover td {
          background-color: #ffb;
       }