如何为 Kindle (KF8) 对齐 table 数据
How to align table data for Kindle (KF8)
我正在尝试使用 kindle 格式 KF8。 Publishing Guidelines 表示格式支持 CSS3:
The earlier Kindle platform offered very basic support for Cascading
Style Sheets (CSS). This has been significantly enhanced in KF8 with
support for CSS 2/CSS 3.
现在这似乎是 "very basic":我想右对齐 table 单元格中的文本。比较 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></td>
<td class="right">right></td>
<td class="left"><left</td>
</tr>
<tr>
<td class="center">centered</td>
<td class="right">right></td>
<td class="right">right></td>
<td class="left"><left</td>
</tr>
</table>
</section>
</article>
</body>
</html>
当你不得不以样式的名义做出这样的变通办法时,这很令人沮丧,但我建议将文本对齐应用到 td
中的包含元素,例如
样式表片段:
td.right div {
width: 100%;
text-align: right;
}
Html 片段:
<tr>
<td class="right"><div>right></div></td>
</tr>
希望这能满足您的需求,直到亚马逊整理它。
我正在尝试使用 kindle 格式 KF8。 Publishing Guidelines 表示格式支持 CSS3:
The earlier Kindle platform offered very basic support for Cascading Style Sheets (CSS). This has been significantly enhanced in KF8 with support for CSS 2/CSS 3.
现在这似乎是 "very basic":我想右对齐 table 单元格中的文本。比较 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></td>
<td class="right">right></td>
<td class="left"><left</td>
</tr>
<tr>
<td class="center">centered</td>
<td class="right">right></td>
<td class="right">right></td>
<td class="left"><left</td>
</tr>
</table>
</section>
</article>
</body>
</html>
当你不得不以样式的名义做出这样的变通办法时,这很令人沮丧,但我建议将文本对齐应用到 td
中的包含元素,例如
样式表片段:
td.right div {
width: 100%;
text-align: right;
}
Html 片段:
<tr>
<td class="right"><div>right></div></td>
</tr>
希望这能满足您的需求,直到亚马逊整理它。