[CSS] Stack td and th in reStructuredText list table on Mobile Screen

2 years ago

source link: https://siongui.github.io/2023/04/04/stack-th-td-in-rst-list-table-on-mobile/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

[CSS] Stack td and th in reStructuredText list table on Mobile Screen

April 04, 2023

Stack td and th elements in reStructuredText list table on mobile devices with small screen. [1] [2] [3]

Demo: Bhikkhu Pāṭimokkha

reStructuredText code:

.. list-table:: Pubba-kicca
   :header-rows: 1
   :class: stack-th-td-on-mobile
   :widths: auto

   * - Pāli
     - English
     - Chinese

   * - Okāsaṃ me bhante thero detu, pāṭimokkhaṃ uddesituṃ
     - May the senior monk give me the opportunity to recite the Pāṭimokkha
     - 願長老給我機會背誦波羅提木叉

SCSS code:

$screen-xs-max: 767;
$smartphone: "(max-width: #{$screen-xs-max}px)";

// Google search: stack td on mobile
// Stack two <td> over each other
// https://stackoverflow.com/a/15571109
.stack-th-td-on-mobile {
  @media #{$smartphone} {
    th,td {
      display: block;
      clear: both;
    }
  }
}

Bonus [4] [5] [6]

Add background color for th and td elements.

$screen-xs-max: 767;
$smartphone: "(max-width: #{$screen-xs-max}px)";

// Google search: stack td on mobile
// Stack two <td> over each other
// https://stackoverflow.com/a/15571109
.stack-th-td-on-mobile {
  @media #{$smartphone} {
    th,td {
      display: block;
      clear: both;
    }
  }

  // https://stackoverflow.com/a/28186676
  // https://www.w3schools.com/cssref/sel_nth-child.php
  tr > td:first-child,th:first-child {
    background-color: None;
  }
  tr > td:nth-child(2),th:nth-child(2) {
    background-color: Azure;
  }
  tr > td:last-child,th:last-child {
    background-color: Cornsilk;
  }
}

Tested on: Python 3.10.6, Pelican 4.8.0.

References:

Recommend

131