how to fix/workaround a truncated table display

[stumped]

what I want to polish is a single table within the epub of Hilary Clinton - How I Lost. I jsut want to tweak my own reading copy.

The epub opens with a two column table called cast of characters, which looks ok in sigil, but on my tablet in moon+ the right hand column is truncating - missing some characters.-
[ A common issue with tables I believe and a reason to NOT use them.
BUt in this case, the publisher has, so I figured I'd try to learn enough about table CSS to see if I can tweak the display within my personal copy of it.

or use a quick and dirty way to just wipe all the table code & go to a simple text list, with some tab or alt separator , if that is easier?

I will also check out the kindle azw sample version, if there is one, to see if that has been coded differently/ works better on tablet.

so here's a small fair use bit - can anyone advise on how to tweak it so that all text is visible- it does seem to wrap, but only after some stuff within the right hand column table boxes is lost

my immediate prime suspects is columen of 25% and 50% that does not add up to 100% ?
<h1 class="chaptertitle">CAST OF CHARACTERS</h1>

<table cellpadding="0" cellspacing="0" class="table-note" width="100%">
<colgroup class="calibre3">
<col width="25%" class="calibre4"/>

<col width="60%" class="calibre4"/>
</colgroup>

<tbody>
<tr class="calibre5">
<td valign="top" class="calibre6">
<b class="calibre7">Huma Abedin</b>
</td>

<td valign="top" class="calibre6">
Hillary Clinton’s closest aide
</td>
</tr>

<tr class="calibre5">
<td valign="top" class="calibre6">
<b class="calibre7">Julian Assange</b>
</td>

<td valign="top" class="calibre6">
Founder and publisher of WikiLeaks
</td>
</tr>
...
heres a bit that truncates as its too wide:
<td valign="top" class="calibre6">
Secretary of state in the George H.W. Bush administration
</td>

and some related css. ( I ran it through a calibre conversion so see if that would auto fic it - hence all the calibre CSS styles - but no joy)
.calibre3 {
display: table-column-group
}
.calibre4 {
display: table-column
}
.calibre5 {
display: table-row;
page-break-inside: avoid;
vertical-align: middle
}
.calibre6 {
display: table-cell;
padding-bottom: 1px;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
text-align: left;
vertical-align: inherit
}
.calibre7 {
font-weight: bold
}

[stumped]

Update, for a 2nd opinion I opened the book in Bookari, at the same table, on the same device. I don't lose any characters, but it is still a poor read, as it is unclear where row entries begin and end in the right column. So I think I can blame moon reader and not the css for the lost text.. moon must miscalculate the available space
I would still prefer to regex the table out of existence and have each entry appear, left aligned ,as
Name in bold
Description on normal
Line space
Next name in bold etc

I guess i do that with multiple regex passes on that page only
For my education, is there an alternative way to get a two column layout effect, without needing a table ?

[JSWolf]

Where did this eBook come from. That's not the original code for the book.

[DiapDealer]

Originally Posted by JSWolf

Where did this eBook come from. That's not the original code for the book.

Irrelevant. Besides ... the OP mentioned there was a calibre conversion involved. Stick to the topic.

[stumped]

Originally Posted by DiapDealer

Irrelevant. Besides ... the OP mentioned there was a calibre conversion involved. Stick to the topic.

Like he said. I could post the original css but no point really.
To re summarise the questions.
Is there a simpler way to get a two column "table " without actually coding it as a table, since the moon reader handles that so badly

And is there a simple way to regex away all the table stuff as a crude workaround

I am more interested in using this as a case study for how it could have been done better, or differently
If i study what is missing, I can see that moon is miscalculating how many characters there is room for. So, making up some example numbers, it computes that there is room for say twenty characters, but actually there is only room for fifteen. So it wraps at twenty one, I get the last bit of text, but I lose some in the middle.

Bookari gets all the characters onto the screen ok, but does not align the row tops across both columns, probably because there is an align middle stated or implied in the code

I know I can fix it very crudely by copying book view into notepad, then pasting it back as a new text page. That will destroy all the styling. But I would rather learn a more subtle approach.

There was a similar table I had trouble with a while back. In that instance I had taken some web page pc game guide stuff, for game item attributes, and saved as html then converted to epub, ending up with troublesome tables. In that instance I eventually manually deleted all of the table formatting.

[stumped]

Fyi
http://www.orbooks.com/catalog/how-i-lost/

There does not appear to be an Amazon UK kindle version so i cannot link to a free sample

262 pages • Paperback ISBN 978-1-682190-85-2 • E-book 978-1-682190-86-9

But I want to discuss only the merits of the epub code, not ms clinton's politics!

[stumped]

The basic coding question is how to do simply something like
smith butcher
Jones baker
longer name candlestick maker

As a.pseudo table layout, so the occupations align vertically

[Turtle91]

Here's a real quick regex to change most of the table to <p> in one pass for a glossary type index. You would need to remove any <table>or <tfoot>/<thead> tags with a different S/R.

search: <tr.*?>\s*<td.*?><b.*?>(.*?)</b></td>\s*<td.*?>(.*?)</td>\s*</tr>
replace: <p><strong>\1</strong> — \2</p>

...and then I style like this:

div.hang p      {padding-left:2em; text-indent:-1.8em; margin-top:1em}

<div class="hang">
<p><strong>Dion</strong> — The Narrator</p>
<p><strong>Dion</strong> — The Publisher</p>
<p><strong>Dion</strong> — The Editor</p>
...etc.
</div>

If you want to clean up the table you really don't need all of those classes in each and every column/row. You can style the whole table with a simple table class. Such as:

table.test          {margin:0 auto; width:90%; border-collapse:collapse}
table.test td       {vertical-align:top; padding:5px}
table.test thead    {text-align:center; font-weight:bold}
table.test tfoot    {font-size:.8em}
table.test tbody td {border:1px solid}


<table class="test">
<tr>
   <td><strong>Dion</strong></td>
   <td>The Narrator</td>
</tr>
<tr>
   <td><strong>Dion</strong></td>
   <td>The Publisher</td>
</tr>
...etc.
</table>

If you need a specific <td> to stretch across multiple columns then you would just add the colspan to that specific <td> (eg. <td colspan="2">) I haven't been able to find a reliable way to define the colspan or column width using CSS. If anyone else knows I'd be interested.

That seems to work well. But there is always the caveat that you need to test on your particular device!

Cheers,

[Doitsu]

Originally Posted by stumped

The epub opens with a two column table called cast of characters, which looks ok in sigil, but on my tablet in moon+ the right hand column is truncating - missing some characters.

IIRC, Moon+ Reader doesn't exactly have a stellar track record when it comes to rendering books with advanced formatting.

IMHO, the easiest way to solve this problem is to convert your two-column table to a definition list. The definition list should look like this:

<dl>
  <dt>Person 1</dt>
  <dd>Description of person 1</dd>

  <dt>Person 2</dt>
  <dd>Description of person 2</dd>
</dl>

[stumped]

Thanks for both suggestions,
as I asked for the learning experience I will try removing all the individual cell styling and see how moon handles the simplified version.
Then fallback to the definitions approach instead if no joy
Definitions list is something new to me so I will did out css guides and Google as needed

[stumped]

i tried removing all the <tr and <td style classes then re-sending to moon. but moon still loses part of of the right hand column
there is a visible border drawn around 3 sides of the table in moon reader, so it is easy to see that the right side is truncated on the display

it seems that tables + moon reader pro = bad idea

so I will have a go at the list definition method next

[stumped]

PS I wonder if the margin right bit of this table CSS is to blame, I do lose about 3em worth of characters ( ~6 characters )
what is a negative margin value supposed to do ?
.table-note {

border-collapse: separate;
border-spacing: 2px;
display: table;
font-family: serif;
font-size: 1em;

margin-bottom: 0.3em;
margin-left: 0;
margin-right: -3em;
margin-top: 0.3em;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
text-align: justify;
text-indent: 0

[stumped]

well that is progress: changing margin right -3em to margin right zero shows all the text with no obvious side effects.
but the wrap is not quite right. text from column 2 wraps back to column 1. so I see

Julian Assange blah blah blah
wikileaks

rather than
Julian Assagne blah blah blah
.....................wikileaks

if I open the book in ADE on PC , the wrap is OK - it stays in the right hand column , so I guess that's another instance of poor tables implementation in moon reader

[JustinThought]

Originally Posted by stumped

//snip!//

it seems that tables + moon reader pro = bad idea

//snip more!//

FYI, Moon+ is my preferred reader because it has the most features that I like to use. But it's definitely a love/hate relationship, because it also has the worst track record at presenting the e-books in the format the publisher has defined.

Whenever I run across something (such as a table) in Moon+ that appears to be a little dodgy...I pull it up in Gitden Reader and go "Oh! Wow! So that's what it's supposed to look like!"

Oh, and that specific book you're playing with? I could have re-written it, but I only would have needed to use four words.

[DiapDealer]

A gentle reminder that only the coding of this book is to be discussed here. There's an opt-in Politics and Religion forum where the contents of the book itself can be discussed, argued, and joked about.