feat: add ghost style for table directives

lepture · Jan 17, 2024 · e36d8ee · e36d8ee
1 parent 9990e31
commit e36d8ee
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 8 deletions.
diff --git a/docs/writing/table.rst b/docs/writing/table.rst
@@ -3,9 +3,12 @@ Tables
 
 There are many ways to create a table. Here are some of them.
 
-Simple Table
+Table fences
 ------------
 
+Simple Table
+~~~~~~~~~~~~
+
 Very simple tables can be created with the syntax bellow:
 
 .. code-block:: ReST
@@ -56,7 +59,7 @@ True   True   True
 
 
 Grid Table
-----------
+~~~~~~~~~~
 
 The `grid table <https://docutils.sourceforge.io/docs/ref/rst/restructuredtext.html#grid-tables>`_
 syntax can create more complex tables:
@@ -87,8 +90,11 @@ syntax can create more complex tables:
 | body row 4 |            | - blocks. |
 +------------+------------+-----------+
 
-Table Directive
----------------
+Table directives
+----------------
+
+table
+~~~~~
 
 There is also a `table directive <https://docutils.sourceforge.io/docs/ref/rst/directives.html#table>`_,
 which can wrap the above tables with many options.
@@ -115,8 +121,8 @@ which can wrap the above tables with many options.
    True   False
    =====  =====
 
-CSV Table
----------
+csv-table
+~~~~~~~~~
 
 You can also use a ``csv-table`` directive to create tables:
 
@@ -140,8 +146,8 @@ You can also use a ``csv-table`` directive to create tables:
    crunchy, now would it?"
    "Gannet Ripple", 1.99, "On a stick!"
 
-List Table
-----------
+list-table
+~~~~~~~~~~
 
 Or with a ``list-table`` directive:
 
@@ -183,6 +189,34 @@ Or with a ``list-table`` directive:
      - 1.99
      - On a stick!
 
+ghost class
+~~~~~~~~~~~
+
+With ``:class: ghost`` option, you can use the "ghost" style of a table.
+
+.. code-block:: ReST
+
+    .. table::
+        :class: ghost
+        :widths: auto
+
+        =====  =====
+          A    not A
+        =====  =====
+        False  True
+        True   False
+        =====  =====
+
+.. table::
+   :class: ghost
+   :widths: auto
+
+   =====  =====
+     A    not A
+   =====  =====
+   False  True
+   True   False
+   =====  =====
 
 Responsive table
 ----------------

diff --git a/static/css/contents/table.css b/static/css/contents/table.css
@@ -69,3 +69,24 @@
   background-clip: content-box;
   border: 3px solid transparent;
 }
+
+/* ghost table */
+.yue table.ghost th,
+.yue table.ghost td {
+  border-left: 0;
+  border-right: 0;
+  padding: 0.75rem;
+  background-color: transparent;
+}
+.yue table.ghost th:last-child {
+  border-right: 0;
+}
+.yue table.ghost caption {
+  margin-bottom: 0;
+  padding-bottom: 0.5rem;
+  border-bottom: 3px solid var(--yue-c-td-border);
+}
+.yue table.ghost thead tr:first-of-type {
+  border-top: 0;
+  border-bottom-width: 3px;
+}