如何对齐 Kindle (KF8) 的表格数据答案

【问题标题】：How to align table data for Kindle (KF8)如何对齐 Kindle (KF8) 的表格数据
【发布时间】：2016-03-18 22:47:14
【问题描述】：

我正在使用 kindle 格式的 KF8 进行我的第一步。 Publishing Guidelines 表示该格式支持 CSS3：

早期的 Kindle 平台为 Cascading 提供了非常基本的支持样式表 (CSS)。这在 KF8 中得到了显着增强支持 CSS 2/CSS 3。

现在这似乎是“非常基本的”：我想右对齐表格单元格中的文本。比较 Chrome 与 kindlegen 2.9 / Kindle Previewer 2.94 的输出。 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>

【问题讨论】：

标签： amazon kindle

【解决方案1】：

当你不得不以样式的名义做出这样的变通方法时，这令人沮丧，但我建议将文本对齐应用于td 中的包含元素，例如

样式表 sn-p:

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

HTML sn-p:

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

希望这将满足您的需求，直到亚马逊整理。

【讨论】：

谢谢，这行得通。一旦单元格中有上标之类的东西，它就不起作用，但我很高兴这里至少有一个基本的布局选项。在这里声称支持 CSS 是个笑话，更不用说 CSS3。