CSSで文字罫線のすき間をなくして詰めたい

Question

クロスワード自動作成ソフト「クロスワード ギバー」の黒マスパターンを
掲載するウェブページを作っています。

JavaScript・jQuery・JSON使用の、次のようなページです：https://katahiromz.web.fc2.com/xword/pat/

ソースはコチラです：

• https://github.com/katahiromz/XWordGiver/blob/master/pat/index.html
• https://github.com/katahiromz/XWordGiver/blob/master/pat/data.json

クロスワードの黒マス配置のパターンを表示・格納するのに文字罫線を使っています。
問題は、IE11、MS Edge、Google Chrome、Firefoxなどの主要なブラウザで
文字罫線にすき間が生じることです。

line-heightなどいろいろ試しましたが、主要ブラウザを網羅する方法は
見つかりませんでした。

すき間をなくすには、どのようなHTML/CSSにすればいいかを教えていただきたいです。
よろしくお願いします。

Answer 1

ピタッとくっついた表示ししたいならテーブルをつかったり工夫することです
（文字を使うということは隙間がある前提です）

Comments

[katahiromz]

TABLEで実装したところ、うまくいきました。ありがとうございます。