在網頁上固定表格式佈局

Question

我想在網頁上介紹劃分筆和紙方法的中間步驟。

結果應該像在方格紙/方格紙上「書寫」。

• 我可以使用一個表格，但WCAG說這不是方法。
• 我可以使用固定寬度的字體和<pre>，但是如果我不喜歡固定寬度的字體呢？

此圖片更好地解釋它： http://upload.wikimedia.org/wikipedia/commons/4/40/Division_Schriftlich.jpg

垂直行數是很重要的。

Answer 1

這是一個使用div的例子。文本類型的大小將與此一起工作。請注意，您必須垂直閱讀列以添加文本。

HTML

<div class="col">1<br>1<br></div> 
<div class="col">3<br>2<br>1<br>1</div> 
<div class="col">0<br>0<br>0<br>0</div> 
<div class="col">7<br><br>7<br>5<br>2<br>1</div> 
<div class="col"><br><br><br><br>0<br>5</div> 
<div class="col"><br></div> 

CSS帶邊框

.col { 
    border: 1px solid black; 
    display: inline-block; 
    float: left; 
} 

實施例（顯示垂直取向）here

實施例無國界here

使用非易碎的空間的方法，例如：

1307<br> 
120<br> 
&nbsp;107<br> 
&nbsp;105<br> 

將無法​​正確對齊。因此，拋棄水平對齊，我認爲垂直對齊是最好的選擇。

這是一個example與增強版式