[Tex2002ans]

Originally Posted by mrmikel

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:

<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:

#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:



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).