diff --git a/docs/writing/table.rst b/docs/writing/table.rst index 5b38d82..d16130d 100644 --- 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 `_ 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 `_, 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 index af64b16..f5bb022 100644 --- 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; +}