View Single Post
Old 02-20-2014, 04:20 PM   #4
Tex2002ans
Fanatic
Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.
 
Posts: 530
Karma: 562971
Join Date: Jul 2012
Device: Nook
Quote:
Originally Posted by mrmikel View Post
I have been trying to replace tables in my epubs with divs and css.
Hmmm... any specific reason you are trying to do this, instead of just using typical HTML tables?

I took a quick look around, and I stumbled upon this site, which has some sample CSS Table Code:

http://www.vanseodesign.com/css/tables/

I used that to derive code for your example:

Code:
<div id="table">
    <div class="row">
      <span class="col1">Ordnance and ordnance stores</span>
      <span class="col2">$45,000,000</span>
    </div>

    <div class="row">
      <span class="col1">Aircraft and aeronautical material</span>
      <span class="col2">29,775,000</span>
    </div>

    <div class="row">
      <span class="col1">Tanks and other vehicles</span>
      <span class="col2">15,000,000</span>
    </div>

    <div class="row">
      <span class="col1">Miscellaneous military equipment</span>
      <span class="col2">10,225,000</span>
    </div>
  </div>
CSS:

Code:
#table {
    display: table;
    width: 100%;
}

.row {
    display: table-row;
}

.col1 {
    display: table-cell;
    min-height: 1px;
    width: 75%;
    text-align: left;
}

.col2 {
    display: table-cell;
    min-height: 1px;
    width: 25%;
    text-align: right;
}
Here is the images showing how it works in ADE/Sigil/Nook:

Click image for larger version

Name:	ADECSSTable.png
Views:	50
Size:	57.9 KB
ID:	119327 Click image for larger version

Name:	SigilCSSTable.png
Views:	54
Size:	42.1 KB
ID:	119328 Click image for larger version

Name:	NookCSSTable.jpg
Views:	48
Size:	163.6 KB
ID:	119326

I didn't do any further testing beyond that.

Anyway, don't ask me to explain how it works... It seems like you were missing "display" in your CSS... and the floats weren't helping:

http://www.w3.org/wiki/CSS/Properties/display

I am always interested in how to make my tables better (currently they are just barebones basic HTML, and admittedly hideous). It is just getting around to spending a day or two to figure table code, and testing across devices... I would rather GET MORE BOOKS CONVERTED/OUT THERE. But this looks slightly promising.

Side Note: mrmikel, please use Code boxes, they make reading the code MUCH easier. You can use it on MobileRead by surrounding the text with [CODE][/CODE] (or pushing the little '#' button in the Advanced Post Editor).
Attached Files
File Type: epub CSSTable.epub (3.4 KB, 26 views)

Last edited by Tex2002ans; 02-20-2014 at 04:42 PM.
Tex2002ans is online now   Reply With Quote