在可打印文檔的<thead>上添加使用CSS的總頁數指示器？

我修改了我的網頁a CSS page-numbering solution。在可打印文檔的<thead>上添加使用CSS的總頁數指示器？

它會自動顯示爲「1」，「第2頁」等，我想它，以示「的第1頁」，「第2頁5」等

@media print { 
    thead span.page-number:after { 
    counter-increment: page; 
    content: "Page " counter(page) " of ?"; 
    } 
}

HTML：（原諒我用表格，而不是CSS display: table-header-group）

<table> 
    <thead> 
    <tr> 
     <td> 
     <span class="page-number"></span> 
     </td> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td> 
     .............................................................. 
     </td> 
    </tr> 
    </tbody> 
</table>

有什麼辦法增加總頁數代替我的?？

我只對最新版本的Firefox或Chrome感興趣。

到目前爲止，我目前的解決方案是使用服務器爲每個頁面創建一個元素，但以這種方式獲得最佳分頁更困難。 <thead>解決方案要簡單得多。

來源

2013-11-27 George Bailey

您可以爲網站中的每個頁面創建一個元素嗎？因此，一個有3個頁面的網站（home，about，contact）會在每個頁面上創建一個無序列表，併爲每個頁面添加一個li。然後你可以在這些元素上使用反遞增。最好的我可以拿出:) 這個列表實際上可以是一個方便的用戶網站地圖:) – grimmus

其實，我正在使用的網頁是一個可打印的公司文件。你的評論似乎與這個問題脫節。抱歉。 :) –

到目前爲止，我看到的所有內容都只能給出所有元素計數後的元素總數*。 –

-2

雖然不是純粹的CSS答案，只需要一點javascript，並假設每個新頁面/斷點都將由div/span/td或其他HTML實體表示，每個頁面/斷點包含一個「公用類名稱」。你可以得到像這樣的總頁數。

<div class="xxx"></div> 
<div class="xxx"></div> 
<div class="fff"></div> 
<div id="footer"> 
<script type="application/javascript"> 
aaa = document.getElementsByClassName("xxx").length; 
document.write(aaa); 
</script> 
</div>

在上面的例子，這將在腳本插入點產生數字2被輸出到瀏覽器的腳本計數倍XXX的數量顯示爲在該文件的任何元素的類。

來源

2013-12-03 19:27:36 DMSJax

對不起，這是錯誤的答案，因爲只涉及一個元素。該元素在每個頁面上重複，因爲它在''中，但仍然只有一個元素。 'length'總是'1'。 –

您可以使用計數器（頁）。下面是示例

thead span.page-number:after { 
    counter-increment: page; 
    content: "Page " counter(page) " of " counter(pages); 
}

來源

2014-05-21 09:54:05 user3660221

沒有爲我工作。注意這是我在[Demo]（http://jsfiddle.net/KeuwU/show/）中發佈的內容。 –

在可打印文檔的<thead>上添加使用CSS的總頁數指示器？

回答

相關問題