Skip to main content

CSS: Specialized Tables

<style>
/* Specialized Tables */
/* Language Pronoun Tables */
      /* Language Tables Styling */
      .language-pronoun-table .cell {
        background-color: #f8f8f8;
        text-align: center;
        vertical-align: middle;
      }
      .language-pronoun-table .subheader2 {
        background-color:#e6e6e6;
        font-style:italic;
        font-weight:bold;
        text-align: center;
        vertical-align: middle;
       }
      .language-pronoun-table .header {
        color: #fff;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        background: linear-gradient(135deg, #902424, #b03030);
      }
      html.dark-mode .language-pronoun-table .header {
        background: linear-gradient(135deg, #902424, #b03030);
        color: #fff;
      }
 
      html.dark-mode .language-pronoun-table .subheader2 {
        background-color: #2a2a2a;
        color: inherit;
      }
      html.dark-mode .language-pronoun-table .cell {
        background-color: #242424;
      }
/* Edition Table (11 Columns) */
      .edition-table {
        table-layout: fixed !important;
        width: 100%;
      }
      
      .edition-table colgroup col:first-child {
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
      }
      /* Page-specific vertical borders for 11-col Book Edition table */
      .edition-table td:nth-child(-n+10),
      .edition-table th:nth-child(-n+10) {
        border-right: 2px solid #a6a6a6 !important;
      }
  
      /* Dark mode page-specific vertical borders for Book Edition table */
      html.dark-mode .edition-table td:nth-child(-n+10),
      html.dark-mode .edition-table th:nth-child(-n+10) {
        border-right: 2px solid #4d4d4d !important;
      }
      /* Remove header scrollbars for specific columns */
      .edition-table thead th:nth-child(3), /* Publisher */
      .edition-table thead th:nth-child(4), /* Cover Artist */
      .edition-table thead th:nth-child(5), /* Interior Artist */
      .edition-table thead th:nth-child(10) { /* Publication Date */
        overflow: hidden !important; /* Clips any excess */
        scrollbar-width: none; /* Firefox hide */
        -ms-overflow-style: none; /* IE/Edge hide */
      }
      .edition-table thead th:nth-child(3)::-webkit-scrollbar,
      .edition-table thead th:nth-child(4)::-webkit-scrollbar,
      .edition-table thead th:nth-child(5)::-webkit-scrollbar,
      .edition-table thead th:nth-child(10)::-webkit-scrollbar {
        display: none; /* Webkit (Chrome/Safari) hide */
      }
      /* Dark mode mirror */
      html.dark-mode .edition-table thead th:nth-child(3),
      html.dark-mode .edition-table thead th:nth-child(4),
      html.dark-mode .edition-table thead th:nth-child(5),
      html.dark-mode .edition-table thead th:nth-child(10) {
        overflow: hidden !important;
      }
      html.dark-mode .edition-table thead th:nth-child(3)::-webkit-scrollbar,
      html.dark-mode .edition-table thead th:nth-child(4)::-webkit-scrollbar,
      html.dark-mode .edition-table thead th:nth-child(5)::-webkit-scrollbar,
      html.dark-mode .edition-table thead th:nth-child(10)::-webkit-scrollbar {
        display: none;
      }

/* === INTERIOR ARTIST - NARROW BASE (MOVED TO TOP) === */
.edition-table td:nth-child(5),
.translation-table td:nth-child(7) {
   max-width: 110px;
   white-space: normal !important;
   word-wrap: break-word;
}

/* === EDITION & TRANSLATION: LET COLUMNS BREATHE === */
.edition-table td:nth-child(2), /* Cover */
.edition-table td:nth-child(11), /* Notes */
.translation-table td:nth-child(3), /* Cover */
.translation-table td:nth-child(13) { /* Notes */
   height: auto !important;
   width: 220px !important;
   min-width: 200px !important;
   white-space: normal !important;
   word-wrap: break-word;
}

/* === AUTOFIT COLUMNS - EDITIONS TABLE === */
.edition-table td:nth-child(3), /* Publisher */
.edition-table td:nth-child(4), /* Cover Artist */
.edition-table td:nth-child(6), /* Format */
.edition-table td:nth-child(8), /* Dimensions */
.edition-table td:nth-child(9), /* ISBN-13 */
.edition-table td:nth-child(10), /* Publication Date */
.edition-table th:nth-child(3),
.edition-table th:nth-child(4),
.edition-table th:nth-child(6),
.edition-table th:nth-child(8),
.edition-table th:nth-child(9),
.edition-table th:nth-child(10) {
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
}

/* === AUTOFIT COLUMNS - TRANSLATION TABLE === */
.translation-table td:nth-child(4), /* Publisher */
.translation-table td:nth-child(5), /* Translator */
.translation-table td:nth-child(6), /* Cover Artist */
.translation-table td:nth-child(8), /* Format */
.translation-table td:nth-child(9), /* Pages */
.translation-table td:nth-child(10), /* Dimensions */
.translation-table td:nth-child(11), /* ISBN-13 */
.translation-table td:nth-child(12), /* Publication Date */
.translation-table th:nth-child(4),
.translation-table th:nth-child(5),
.translation-table th:nth-child(6),
.translation-table th:nth-child(8),
.translation-table th:nth-child(9),
.translation-table th:nth-child(10),
.translation-table th:nth-child(11),
.translation-table th:nth-child(12) {
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
}

/* === AUDIOBOOK TABLE - ALL COLUMNS AUTOFIT EXCEPT NOTES === */
.audiobook-table td:nth-child(-n+6),
.audiobook-table th:nth-child(-n+6) {
  min-width: auto !important;
  max-width: none !important;
  white-space: nowrap;
}

/* === AUDIOBOOK NOTES COLUMN - MATCH EDITIONS/TRANSLATION NOTES WIDTH === */
.audiobook-table td:nth-child(7),
.audiobook-table th:nth-child(7) {
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  white-space: normal !important;
  word-wrap: break-word;
}

/* === EDITIONS TABLE - COLUMN 1 (Edition) - WIDER + WRAP === */
.edition-table td:nth-child(1),
.edition-table th:nth-child(1) {
  max-width: 120px !important;     /* ? CHANGE THIS */
  width: 120px !important;
}

/* === EDITIONS TABLE - COLUMN 7 (Pages) - NARROWER + WRAP === */
.edition-table th:nth-child(7) {
  max-width: 50px !important;      /* ? CHANGE THIS */
  word-wrap: break-word;
  text-align: center;
}
.edition-table th:nth-child(7) {
  max-width: 50px !important;      /* ? CHANGE THIS */
  word-wrap: break-word;
  text-align: left;
}

/* === EDITIONS TABLE - COLUMN 5 (Interior Artist) - WIDER === */
.edition-table td:nth-child(5),
.edition-table th:nth-child(5) {
  max-width: 160px !important;     /* Desktop */
}
@media (max-width: 768px) {
  .edition-table td:nth-child(5),
  .edition-table th:nth-child(5) {
    max-width: 140px !important;   /* Mobile */
  }
}

/* === TRANSLATIONS TABLE - COLUMN 2 (Title) - WIDER + WRAP === */
.translation-table td:nth-child(2),
.translation-table th:nth-child(2) {
  max-width: 180px !important;     /* ? CHANGE THIS */
  word-wrap: break-word;
}

/* === TRANSLATIONS TABLE - COLUMN 8 (Format) - NARROW + WRAP === */
.translation-table td:nth-child(8),
.translation-table th:nth-child(8) {
  max-width: 80px !important;      /* ? CHANGE THIS */
  word-wrap: break-word;
  text-align: left;
}

/* === TRANSLATIONS TABLE - COLUMN 7 (Interior Artist) - WIDER === */
.translation-table td:nth-child(7),
.translation-table th:nth-child(7) {
  max-width: 170px !important;     /* Desktop */
}
@media (max-width: 768px) {
  .translation-table td:nth-child(7),
  .translation-table th:nth-child(7) {
    max-width: 150px !important;   /* Mobile */
  }
}

/* Audiobook Table */
      /* Remove header scrollbar for Publication Date column on the Audiobook table */
      .audiobook-table thead th:nth-child(6) {
        overflow: hidden !important; /* Clips excess */
        scrollbar-width: none; /* Firefox hide */
        -ms-overflow-style: none; /* IE/Edge hide */
      }
  
      .audiobook-table thead th:nth-child(6)::-webkit-scrollbar {
        display: none; /* Webkit (Chrome/Safari) hide */
      }
  
      /* Dark mode mirror */
      html.dark-mode .audiobook-table thead th:nth-child(6) {
        overflow: hidden !important;
      }
  
      html.dark-mode .audiobook-table thead th:nth-child(6)::-webkit-scrollbar {
        display: none;
      }
/* Translation Table (13 Columns) */
      .translation-table {
        table-layout: fixed !important;
        width: 100%;
      }
      
      .translation-table colgroup col:nth-child(2) {
        width: 130px !important;
        min-width: 130px !important;
        max-width: 130px !important;
      }
      /* Page-specific vertical borders for 13-col Book Edition table */
      .translation-table td:nth-child(-n+12),
      .translation-table th:nth-child(-n+12) {
        border-right: 2px solid #a6a6a6 !important;
      }
  
      /* Dark mode page-specific vertical borders for Book Edition table */
      html.dark-mode .translation-table td:nth-child(-n+12),
      html.dark-mode .translation-table th:nth-child(-n+12) {
        border-right: 2px solid #4d4d4d !important;
      }
      /* Remove header scrollbars for specific columns */
      .translation-table thead th:nth-child(6), /* Cover Artist */
      .translation-table thead th:nth-child(7), /* Interior Artist */
      .translation-table thead th:nth-child(12) { /* Publication Date */
        overflow: hidden !important; /* Clips any excess */
        scrollbar-width: none; /* Firefox hide */
        -ms-overflow-style: none; /* IE/Edge hide */
      }
      .translation-table thead th:nth-child(6)::-webkit-scrollbar,
      .translation-table thead th:nth-child(7)::-webkit-scrollbar,
      .translation-table thead th:nth-child(12)::-webkit-scrollbar {
        display: none; /* Webkit (Chrome/Safari) hide */
      }
      /* Dark mode mirror */
      html.dark-mode .translation-table thead th:nth-child(6),
      html.dark-mode .translation-table thead th:nth-child(7),
      html.dark-mode .translation-table thead th:nth-child(12) {
        overflow: hidden !important;
      }
      html.dark-mode .translation-table thead th:nth-child(6)::-webkit-scrollbar,
      html.dark-mode .translation-table thead th:nth-child(7)::-webkit-scrollbar,
      html.dark-mode .translation-table thead th:nth-child(12)::-webkit-scrollbar {
        display: none;
      }
</style>