epub table images

by zircon

HTML

<!--This renders in ReadEra visually accurate as images side by side. Problems are: it adds list-style bullets, a border, and image gap. It's being auto added to the table, and there is no way to remove it (cellspacing and cellpadding don't work), though tested different options; even tried just plain table and no DIV (no luck). ReadEra won't pagebreak properly no matter where it's set in a table arrangement.-->

<!--test 10-->
<div class="wrapper10 pagebreak-after">
<table>
  <tr>
    <td><img src="https://i.postimg.cc/28LWCwdv/i4313.jpg"></td>
    <td><img src="https://i.postimg.cc/28LWCwdv/i4313.jpg"></td>
  </tr>
  <tr>
    <td class="caption">Caption A</td>
    <td class="caption">Caption A - much longer caption info</td>
  </tr>
</table>
</div>

CSS

/* ----------page setup---------- */
html, body {
  font-family: Arial, sans-serif;
  font-size: 1em;
  font-style: normal;
  font-weight: normal;
  height: 100%;
}
html {
  height: 100%;
  max-height: 100%;
  height: fill-available;
  height: -webkit-fill-available;
}
*,*:before,*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.pagebreak-after {
  page-break-inside:avoid;
  page-break-after:always; /* old rule fallback */
  break-after: page;
}

/* ---Test 10 using a table--- */
.wraper10 {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  vertical-align: center;
  width: 100%;
  height: 99.5vh;
  /* code fails to eliminate the following from the table in ReadEra */
  list-style-type: none!important;
  border: 0;
  margin: 0;
  padding: 0;
}
table {border-collapse: collapse; width: 100%;}
th, td {border: 2px solid #fff;}
td.caption {background-color: rgb(230,230,230); padding: 2px; line-height: 1.3em; text-align: center;}
td img {display: block; object-fit: contain; width: 100%; height: auto; margin-left: auto; margin-right: auto; max-width: 20em;}
/* keep both images exactly the same dimension no matter how long one caption is below it */
tr td {width: 50%;}