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

.. 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
     - 願長老給我機會背誦波羅提木叉

$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;
    }
  }
}

$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;
  }
}