以下のようなクロスワード表示のhtmlで、マスの中の数字を左上隅に配置したいのですが
どうやってもセンタのままです。
ネットを参考にsoejiの中の定義をいろいろ変えてみましたが上手く行きません。
CSSの中で効率的にやりたい(ファイルサイズを小さくしたい)ので、CSS以外に直接埋め込むのはNGです。
ご教示をお願いします。是非、htmlファイルにして実行してからご教示願えればありがたいです。
----------------切り取り線----------------------------------------------
<!-- 1_SKELTON_kanji_buta_dic.html HEAD -->
<html>
<head>
<meta charset="Shift_JIS">
<style type="text/css">
.table-css {
table-layout: fixed;
width: 150 ;
border-collapse: collapse;
}
td {
width: 30;
height: 30;
text-align: center;
}
soeji {
font-size: 0.2em;
align: left;
valign: top;
}
span {
color:white;
}
.td-toumei {
border-style:none;
}
.td-k0100 {
border: solid black;
border-width: 4px 1px 4px 4px;
}
.td-k0001 {
border: solid black;
border-width: 4px 4px 4px 1px;
}
.td-k1000 {
border: solid black;
border-width: 1px 4px 4px 4px;
}
.td-k0010 {
border: solid black;
border-width: 4px 4px 1px 4px;
}
.td-k1100 {
border: solid black;
border-width: 1px 1px 4px 4px;
}
.td-k0011 {
border: solid black;
border-width: 4px 4px 1px 1px;
}
.td-k0110 {
border: solid black;
border-width: 4px 1px 1px 4px;
}
.td-k1001 {
border: solid black;
border-width: 1px 4px 4px 1px;
}
.td-k0101 {
border: solid black;
border-width: 4px 1px 4px 1px;
}
.td-k1010 {
border: solid black;
border-width: 1px 4px 1px 4px;
}
.td-k1111 {
border: solid black;
border-width: 1px 1px 1px 1px;
}
.td-k1110 {
border: solid black;
border-width: 1px 1px 1px 4px;
}
.td-k0111 {
border: solid black;
border-width: 4px 1px 1px 1px;
}
.td-k1011 {
border: solid black;
border-width: 1px 4px 1px 1px;
}
.td-k1101 {
border: solid black;
border-width: 1px 1px 4px 1px;
}
</style>
</head>
<body>
<div style="page-break-inside: avoid; margin: 0 20px 20px 0; float:left;">
<br>
<table class="table-css" border="0" cellpadding="0" cellspacing="0">
<caption align="top">【スケルトンパズル 問題】1_kanji_buta_dic</caption>
<tr>
<td class="td-k0010 " ><soeji> 1</soeji></td>
<td class="td-toumei" ><span>.</span></td>
<td class="td-k0010 " ><soeji> 2</soeji></td>
<td class="td-toumei" ><span>.</span></td>
<td class="td-toumei" ><span>.</span></td>
</tr>
<tr>
<td class="td-k1100 " ><soeji> 3</soeji></td>
<td class="td-k0101" > </td>
<td class="td-k1111" > </td>
<td class="td-k0001" > </td>
<td class="td-toumei" ><span>.</span></td>
</tr>
<tr>
<td class="td-toumei" ><span>.</span></td>
<td class="td-toumei" ><span>.</span></td>
<td class="td-k1010" > </td>
<td class="td-toumei" ><span>.</span></td>
<td class="td-k0010 " ><soeji> 4</soeji></td>
</tr>
<tr>
<td class="td-k0110 " ><soeji> 5</soeji></td>
<td class="td-k0101" > </td>
<td class="td-k1111" > </td>
<td class="td-k0101" > </td>
<td class="td-k1011" > </td>
</tr>
<tr>
<td class="td-k1000" > </td>
<td class="td-toumei" ><span>.</span></td>
<td class="td-k1000" > </td>
<td class="td-toumei" ><span>.</span></td>
<td class="td-k1000" > </td>
</tr>
</table>
</div>
</body>
<html>
<!-- 1_SKELTON_kanji_buta_dic.html END -->
<html>
<head>
<meta charset="Shift_JIS">
<style type="text/css">
.table-css {
border-collapse: collapse;
}
.td-toumei {
border-style:none;
}
.td-kakomu {
border-style:solid; border-color:black;
}
</style>
</head>
<body>
<div style="page-break-inside: avoid; margin: 0 20px 20px 0; float:left;">
<br>
[横のカギ]<br>
(3):だてきみこ【人名】<br>
(5):じこそしきか<br>
<br>
[縦のカギ]<br>
(1):きい【地名】<br>
(2):ひこうかいそしき<br>
(4):ぶんかろん<br>
(5):じちゆう｛じちゅう｝<br>
</div>
</body>
<html>
<!-- 1_SKELTON_kanji_buta_dic.html HEAD -->
<html>
<head>
<meta charset="Shift_JIS">
<style type="text/css">
.table-css {
table-layout: fixed;
width: 150 ;
border-collapse: collapse;
}
td {
width: 30;
height: 30;
text-align: center;
}
soeji {
font-size: 0.2em;
align: left;
valign: top;
}
span {
color:white;
}
.td-toumei {
border-style:none;
}
.td-k0100 {
border: solid black;
border-width: 4px 1px 4px 4px;
}
.td-k0001 {
border: solid black;
border-width: 4px 4px 4px 1px;
}
.td-k1000 {
border: solid black;
border-width: 1px 4px 4px 4px;
}
.td-k0010 {
border: solid black;
border-width: 4px 4px 1px 4px;
}
.td-k1100 {
border: solid black;
border-width: 1px 1px 4px 4px;
}
.td-k0011 {
border: solid black;
border-width: 4px 4px 1px 1px;
}
.td-k0110 {
border: solid black;
border-width: 4px 1px 1px 4px;
}
.td-k1001 {
border: solid black;
border-width: 1px 4px 4px 1px;
}
.td-k0101 {
border: solid black;
border-width: 4px 1px 4px 1px;
}
.td-k1010 {
border: solid black;
border-width: 1px 4px 1px 4px;
}
.td-k1111 {
border: solid black;
border-width: 1px 1px 1px 1px;
}
.td-k1110 {
border: solid black;
border-width: 1px 1px 1px 4px;
}
.td-k0111 {
border: solid black;
border-width: 4px 1px 1px 1px;
}
.td-k1011 {
border: solid black;
border-width: 1px 4px 1px 1px;
}
.td-k1101 {
border: solid black;
border-width: 1px 1px 4px 1px;
}
</style>
</head>
<body>
<div style="page-break-inside: avoid; margin: 0 20px 20px 0; float:left;">
<br>
<table class="table-css" border="0" cellpadding="0" cellspacing="0">
<caption align="top">【スケルトンパズル 回答】1_kanji_buta_dic</caption>
<tr>
<td class="td-k0010" >紀</td>
<td class="td-toumei" ><span>.</span></td>
<td class="td-k0010" >非</td>
<td class="td-toumei" ><span>.</span></td>
<td class="td-toumei" ><span>.</span></td>
</tr>
<tr>
<td class="td-k1100" >伊</td>
<td class="td-k0101" >達</td>
<td class="td-k1111" >公</td>
<td class="td-k0001" >子</td>
<td class="td-toumei" ><span>.</span></td>
</tr>
<tr>
<td class="td-toumei" ><span>.</span></td>
<td class="td-toumei" ><span>.</span></td>
<td class="td-k1010" >開</td>
<td class="td-toumei" ><span>.</span></td>
<td class="td-k0010" >文</td>
</tr>
<tr>
<td class="td-k0110" >自</td>
<td class="td-k0101" >己</td>
<td class="td-k1111" >組</td>
<td class="td-k0101" >織</td>
<td class="td-k1011" >化</td>
</tr>
<tr>
<td class="td-k1000" >註</td>
<td class="td-toumei" ><span>.</span></td>
<td class="td-k1000" >織</td>
<td class="td-toumei" ><span>.</span></td>
<td class="td-k1000" >論</td>
</tr>
</table>
</div>
</body>
<html>
<!-- 1_SKELTON_kanji_buta_dic.html END -->
