垂直に書かれたテキストをヘッダーとして持つHTMLテーブルを作成したいと思います(つまり、ヘッダーテキストは90度回転します)。私は次のスタイルを使用しています
<th style="-webkit-transform:rotate(90deg); writing-mode:tb-rl; -moz-transform:rotate(90deg); -o-transform: rotate(90deg); white-space:nowrap; display:blocking; padding-left:1px;padding-right:1px;padding-top:10px;padding-bottom:10px; " align="left" id="#COLUMN_HEADER_NAME#">#COLUMN_HEADER#</th>
MSではIE 9.xはOKと表示されます。FirefoxとChromeでは、ヘッダーがテーブルの上に浮かんでいるように見え、テーブルの行と重なっていますその下に誰か助けてくれませんか?なぜこれが起こっているのか私にはわかりません。私はこのチュートリアルから始めました: http://scottgale.com/blog/css-vertical-text/2010/03/01 /
TIA、タマス
CSSだけでコンテンツを回転させたときに、<th>
の高さを変更できるとは思いません。以下は、jQueryを少し使ってこれを行う方法です。
CSSを使用して要素を回転させる(例:<div>
) 以内 <td>
要素を使用すると、回転したテキストに対応するために列幅が縮小されますが、行の高さは必要に応じて拡大しません。
ChromeおよびMac上のSafari(少なくとも私にとっては)で動作します。
<html>
<head>
<style>
th
{
background-color: grey;
color: white;
text-align: center;
vertical-align: bottom;
height: 150px;
padding-bottom: 3px;
padding-left: 5px;
padding-right: 5px;
}
.verticalText
{
text-align: center;
vertical-align: middle;
width: 20px;
margin: 0px;
padding: 0px;
padding-left: 3px;
padding-right: 3px;
padding-top: 10px;
white-space: nowrap;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
};
</style>
</head>
<body>
<table>
<tr>
<th>Column 1</th>
<th><div class="verticalText">Column 2</div></th>
<th>Column 3</th>
<th><div class="verticalText">Column 4</div></th>
<th>Column 5</th>
<th><div class="verticalText">Column 6</div></th>
<th>Column 7</th>
<th><div class="verticalText">Column 8</div></th>
<th>Column 9</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 1</td>
<td>Data 1</td>
<td>Data 1</td>
<td>Data 1</td>
<td>Data 1</td>
<td>Data 1</td>
<td>Data 1</td>
<td>Data 1</td>
</tr>
<tr>
<td>Data 2</td>
<td>Data 2</td>
<td>Data 2</td>
<td>Data 2</td>
<td>Data 2</td>
<td>Data 2</td>
<td>Data 2</td>
<td>Data 2</td>
<td>Data 2</td>
</tr>
</table>
</body>
</html>
表のセルに縦書きのテキストを取得する簡単な方法があると思います。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
td {
text-align: center;
}
/*Creation of vertical text in cell*/
.vertical_Text {
display: block;
color: #f00;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
};
</style>
</head>
<body>
<table border="1" cellspacing="10" cellpadding="20">
<thead>
<tr>
<!-- vertical cell -->
<td rowspan="2"><span class="vertical_Text" title="vertical text">HEAD</span></td>
<td>header1-2</td>
<td colspan="3">header1-2</td>
</tr>
<tr>
<td>header2-1</td>
<td>header2-2</td>
<td>header2-3</td>
<td>header2-4</td>
</tr>
</thead>
<tbody>
<!-- tr*5>td{data-$/$$}*5 -->
<tr>
<!-- vertical cell -->
<td rowspan="5"><span class="vertical_Text" title="vertical text">DATA</span></td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
</body>
</html>