epub TOC links

Links that are set side by side (+ columns)

by zircon

HTML

<!--OK for Epub use in Kobo. Yet to test in KDP (not flexbox) though since side by side images will work in an epub theoretically a TOC being side by side should work too. See group of source web links below-->

<!--#1-->
<nav epub:type="lot" id="charts">
  <h3>Charts</h3>
  <ol class="myList">
    <li id="tables-01" class=""><a href="text/sec-01.xhtml#Route_Beta_Tour">Charts List</a></li>
	<li id="tables-02" class="width-50 TOCleft"><a href="text/sec-2.xhtml">Chapters &nbsp;&nbsp;1-200</a></li>
	<li id="tables-03" class="width-50 TOCright"><a href="text/sec-3.xhtml">Chapters 201-400</a></li>
	<li id="tables-04" class="width-50 TOCleft"><a href="text/sec-4.xhtml">Chapters 401-600</a></li>
	<li id="tables-05" class="width-50 TOCright"><a href="text/sec-5.xhtml">Chapters 601-800</a></li>
  </ol>
</nav>

<!--#2-->
<div class="flex-container">
  <li><a href="xx.xhtml">Chapters 1-200</a></li>
  <li><a href="xx.xhtml">Chapters 201-400</a></li>
  <li><a href="xx.xhtml">Chapters 401-600</a></li>
  <li><a href="xx.xhtml">Chapters 601-800</a></li>
  <li><a href="xx.xhtml">Chapters 801-1000</a></li>
  <li><a href="xx.xhtml">Chapters 1001-1200</a></li>
  <li><a href="xx.xhtml">Chapters 1201-1400</a></li>
  <li><a href="xx.xhtml">Chapters 1401-1600</a></li>  
  <li><a href="xx.xhtml">Chapters 1601-1800</a></li>
  <li><a href="xx.xhtml">Chapters 2001-2100</a></li>
  <li><a href="xx.xhtml">Chapters 2201-2600</a></li>  
  <li><a href="xx.xhtml">Chapters 2601-2800</a></li>
  <li><a href="xx.xhtml">Chapters 2801-3000</a></li>
</div>

<!--#3-->
<div class="dual-columns">
  <li><a href="text/sec-2.xhtml">Chapters &nbsp;&nbsp;1-200</a></li>
  <li><a href="text/sec-3.xhtml">Chapters 201-400</a></li>
  <li><a href="xx.xhtml">Chapters 401-600</a></li>
  <li><a href="xx.xhtml">Chapters 601-800</a></li>
</div>

<br><br>

<!--source: https://www.mobileread.com/forums/showthread.php?t=284691-->
<!--source: https://www.mobileread.com/forums/showpost.php?p=4144601&postcount=5-->
<!--source:...

CSS

/* test 1 */
ol.myList {
  display: block;
  padding: 0px 0px 0px 0px;
  color: #000;
  list-style: none;
  text-align: center;
  justify-content: center;
}
ol.myList li {
  list-style-type: none;
  margin: 3px 0px 3px 0px;
  padding: 0px;
  color: #000;
}
ol.myList li.width-50 {
  display: inline-block;
  list-style-type: none;
  color: #000;
  width: 49.4%;
}
ol.myList li a {
  display: block;
  padding: 5px;
  margin: 0;
  color: #000;
  font-size: 1.1em;
  border: 1px solid #000;
  background-color: #fffddd;
  word-wrap: break-word;
  text-decoration: none;
}
ol.myList a:link, ol.myList a:visited, ol.myList a:hover {
  font-weight: normal;
}
ol.myList a:hover {
  background-color: #eed111; 
  box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.6);
}
@media (max-width: 400px) {
  ol.myList li.TOCleft, ol.myList li.TOCright {
    width: 100%;
  }
}

/* test 2 - OK in Kobo (in KDP ??) */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: rgb(240,240,240);
  justify-content: center;
  list-style: none;
  list-style-type: none;
}
.flex-container > li {
  background-color: #fffddd;
  border: 1px solid #000;
  width: 150px;
  margin: 3px;
  text-align: center;
  line-height: 1.2em;
  font-size: 1em;
  padding: 5px;
}
@media (max-width: 400px) {
  .flex-container > li {
    width: 100%;
  }
}

/* Test 3 - alternate dual TOC columns - non-responsive */
.dual-columns {
  border: solid #000 1px;
  column-count: 2;
  column-fill: balance;
  justify-content: center;
  list-style: none;
  list-style-type: none;
  padding: 5px;
}
.dual-columns > li {
  border: solid red 3px;
  break-inside: avoid;
  padding: 5px;
  text-align: center;
  line-height: 1.2em;
  font-size: 1em;
}


/* Test #4 columns */
.col1 h1, .col1 h1 {
  clear: both;
  font-size: 1.4em;
  margin: 0;
  padding: 1em 0 2em;
  text-align: center;
}

.col1 h2, .col2 h2 {
  font-size: 1.2em;
  margin: 0;
  padding: 1em 0 2em;
  text-align: center;
}

.col1 p, .col2 p {
  font-size: 1em;
  text-align:...