0
次のコードを使用してすべての大きなヘッダー名に合わせてテーブルを回転するテーブルを作成しています。テーブル内のヘッダーを回転させているときの書式設定エラー
<html><body>
<style type="text/css">
.tftable {font-size:12px;color:#333333;width:1%;border-width: 1px;border-color: #ebab3a;border-collapse: collapse;}
.tftable th {font-size:12px;border-width:1px;padding: 1px;border-style: solid;border-color: #ebab3a;text-align:left;}
.tftable tr { line-height: 14px;}
.tftable td {font-size:12px;border-width: 1px;padding: px;border-style: solid;border-color: #ebab3a;height: 14px;}
.tftable tr:hover {background-color:#ffffff;border:none;}
th.rotate {
/* Something you can count on */
height: 140px;
white-space: nowrap;
}
th.rotate > div {
transform:
/* Magic Numbers */
translate(25px, 51px)
/* 45 is really 360 - 45 */
rotate(270deg);
width: 30px;
}
th.rotate > div {
border-bottom: 0px solid #ccc;
padding: 0px 0px;
}
</style>
<table class="tftable" border="1">
<tr><th class="rotate"><div>Metabolite</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th></tr>
<tr><td bgcolor="green">Metabolilte1</td><td> 2</td><td> 3</td><td> 4</td><td> 5</td><td> 6</td><td> 7</td><td> 8</td><td> 9</td><td> 10</td><td> 11</td><td> 12</td><td> 13</td><td> 14</td><td> 15</td></tr>
<tr><td>Metabolilte2</td><td> 2</td><td> 3</td><td> 4</td><td> 5</td><td> 6</td><td> 7</td><td> 8</td><td> 9</td><td> 10</td><td> 11</td><td> 12</td><td> 13</td><td> 14</td><td> 15</td></tr>
<tr><td>Metabolilte3</td><td> 2</td><td> 3</td><td> 4</td><td> 5</td><td> 6</td><td> 7</td><td> 8</td><td> 9</td><td> 10</td><td> 11</td><td> 12</td><td> 13</td><td> 14</td><td> 15</td></tr>
<tr><td>Metabolilte4</td><td> 2</td><td> 3</td><td> 4</td><td> 5</td><td> 6</td><td> 7</td><td> 8</td><td> 9</td><td> 10</td><td> 11</td><td> 12</td><td> 13</td><td> 14</td><td> 15</td></tr>
</table>
</body></html>
なぜ第二列ヘッダーは空白であり、最後の列ヘッダーは、テーブルの外側に現れますか？ "翻訳" の
問題を詳しく説明できますか？あなたは何を達成しようとしていますか？ –
@ dogwoodtree-dot-net私は回転したヘッダーを書き込もうとしていますが、そこでは2番目のヘッダーが空で最後のものが出てきています。 –