テーブルタグの中のthやtdに文字を入力した時に縦に一文字ずつ表示されて欲しいです。全角であいうえお

締切済

質問者：はじめしゃちょー
質問日時：2017/07/13 23:20
回答数：1件

テーブルタグの中のthやtdに文字を入力した時に縦に一文字ずつ表示されて欲しいです。全角であいうえおと入力すると、「あい」と横に表示されて、「うえ」が二行目に表示されて、「お」が３行目という風になってしまいます。
あ
い
う
え
お
にしたいです。よろしくお願いします

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

参考程度に

No.1

回答者： fujillin
回答日時：2017/07/14 12:57

こんにちは

＞縦に一文字ずつ表示されて欲しいです。
縦書きに見えるようにするには、

1）ボックスの横幅を１文字分に指定しておく
2）文字の表示法を縦書きに指定する
などが考えられます。
また、td要素に直接設定する方法と、td内の子要素に設定しておく方法などがありそうです。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
#hoge td{ width: 6em; }

#hoge td.test1{
writing-mode: tb-rl;
writing-mode: vertical-rl;
}

#hoge td:nth-child(2){
width: 1.1em !important;
}

#hoge .test3{
writing-mode: tb-rl;
writing-mode: vertical-rl;
}

#hoge .test4{
display: inline-block;
width: 1.1em;
}
</style>
</head>
<body>
<table id="hoge" border=1>
<tr>
<td class="test1">あいうえお</td><td>ほげほげ</td>
<td>ほげほげ</td><td>ほげほげ</td>
</tr>
<tr>
<td>ほげほげ</td><td class="test2">かきくけこ</td>
<td>ほげほげ</td><td>ほげほげ</td>
</tr>
<tr>
<td>ほげほげ</td><td>ほげほげ</td>
<td><span class="test3">さしすせそ</span></td><td>ほげほげ</td>
</tr>
<tr>
<td>ほげほげ</td><td>ほげほげ</td><td>ほげほげ</td>
<td><span class="test4">たちつてと</span></td>
</tr>
</table>
</body>
</html>