2015-12-13 44 views
5

Robię moje pierwsze kroki z kindle format KF8. Publishing Guidelines stan że format obsługuje CSS3:Jak wyrównać dane tabeli dla Kindle (KF8)

Im wcześniej platforma Kindle oferowany bardzo podstawowe wsparcie dla Kaskadowe Style Sheets (CSS). Ta została znacznie zwiększona w KF8 z wsparcie dla CSS 2/CSS 3.

Teraz to wydaje się być „bardzo podstawowe” tutaj: Chcę prawo wyrównać tekst w komórce tabeli. Porównaj dane wyjściowe Chrome z kindlegen 2.9/Kindle Previewer 2.94. Podgląd Kindle ignoruje całkowicie wyrównanie.

Co robię źle?

Chrome vs Kindle Preview

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Table sample</title> 
     <meta charset="utf-8" /> 
     <style> 
td.right { 
    padding: 2px 4px; 
    text-align : right; 
} 

td.left { 
    padding: 2px 4px; 
    text-align : left; 
} 

td.center { 
    padding: 2px 4px; 
    text-align : center; 
} 

h2 { color: green; } 

</style> 
    </head> 
    <body> 
     <a name="part2_chap1"/> 
     <article role="main"> 
      <header class="chapter"> 
       <hgroup> 
        <h2>ALIGNMENT</h2> 
       </hgroup> 
      </header> 
      <div class="epigraph"> 
       <p class="noind">How to right align table data</p> 
      </div> 
      <section class="table" id="table01"> 
       <table> 
        <tr> 
         <th> 
          <i>---center---</i> 
         </th> 
         <th> 
          <i>---right---</i> 
         </th> 
         <th> 
          <i>---right---</i> 
         </th> 
         <th> 
          <i>---left---</i> 
         </th> 
        </tr> 
        <tr> 
         <td class="center">---centered---</td> 
         <td class="right">right&gt;</td> 
         <td class="right">right&gt;</td> 
         <td class="left">&lt;left</td> 
        </tr> 
        <tr> 
         <td class="center">centered</td> 
         <td class="right">right&gt;</td> 
         <td class="right">right&gt;</td> 
         <td class="left">&lt;left</td> 
        </tr> 
       </table> 
      </section> 
     </article> 

    </body> 
</html> 

Odpowiedz

2

To frustrujące, kiedy trzeba dokonać takich obejścia w imię stylizacji, ale radziłbym stosowania wyrównania tekstu do elementu zawierającego w td, na przykład

Stylesheet snippet:

td.right div {   
    width: 100%; 
    text-align: right; 
} 

kod HTML:

<tr> 
    <td class="right"><div>right&gt;</div></td> 
</tr> 

Mam nadzieję, że będzie to w zależności od potrzeb do tej Amazon schludny tego.

+0

Dziękuję, to działa. To nie działa, gdy w komórce jest coś w rodzaju indeksu górnego, ale cieszę się, że mam przynajmniej podstawową opcję układu. Twierdzenie o obsłudze CSS jest żartem, nie wspominając już o CSS3. – ratlan