2015-12-13 11 views
5

Sto facendo i miei primi passi con il formato Kindle KF8. Il Publishing Guidelines stato che il formato supporta CSS3:Come allineare i dati della tabella per Kindle (KF8)

La piattaforma Kindle in precedenza offerto il supporto di base per Cascading Style Sheets (CSS). Questo è stato notevolmente migliorato in KF8 con supporto CSS 2/CSS 3.

Ora, questo sembra essere "molto semplice" qui: voglio allineare a destra il testo in una cella di una tabella. Confronta l'output di Chrome vs kindlegen 2.9/Kindle Previewer 2.94. Anteprima Kindle ignora completamente l'allineamento.

Cosa sto sbagliando?

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> 

risposta

2

E 'frustrante quando si deve rendere tali soluzioni alternative in nome dello stile, ma vorrei consigliare applicando l'allineamento del testo ad un elemento che contiene all'interno del td, per esempio

di stile snippet:

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

snippet HTML:

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

Speriamo che questo soddisfa le tue esigenze, fino Amazon ordinato questo in su.

+0

Grazie, funziona. Non funziona non appena c'è qualcosa come un apice nella cella, ma sono felice di avere almeno un'opzione di layout rudimentale qui. Rivendicare il supporto per CSS qui è uno scherzo, per non parlare di CSS3. – ratlan

Problemi correlati