html - html でこのような表を作成する方法、または表のない表を作成する方法

Question

ヘッダー付きのhtmlでデータを表示する必要があります。以下は、私が苦労しているヘッダーの一部の画像です。

ここに画像の説明を入力

テキストを回転させることはできましたが、問題はオーバーラップです。

これは構造全体のコードです。

<style type="text/css"> .text-rotation {
            -webkit-transform: rotate(90deg); 
            -moz-transform: rotate(90deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
            -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
            height:inherit;
            }
</style>
</head>

<body>
<table width="100%" border="1" align="center" cellpadding="3" cellspacing="1">
  <tr>
    <td rowspan="5">&nbsp;</td>
    <td rowspan="5" align="center" valign="bottom">Code</td>
    <td rowspan="5" align="center" valign="bottom">Change</td>
    <td rowspan="5" align="center" valign="bottom">Description</td>
    <td colspan="6" align="center" bgcolor="#FF6666">STOCK RANGE</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2" align="center" bgcolor="#66CC00" >SPHERICAL</td>
    <td colspan="2" align="center" bgcolor="#FFCC00" >SPH/CYL-/-</td>
    <td colspan="2" align="center" bgcolor="#0066CC">SPH/CYL+/-</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td rowspan="3" align="center" bgcolor="#66CC00" class="text-rotation">MINUS</td>
    <td rowspan="3" align="center" bgcolor="#66CC00" class="text-rotation">PLUS</td>
    <td rowspan="3" align="center" bgcolor="#FFCC00" class="text-rotation">MINUS</td>
    <td rowspan="3" align="center" bgcolor="#FFCC00" class="text-rotation">PLUS</td>
    <td rowspan="3" align="center" bgcolor="#0066CC"  class="text-rotation">PLUS</td>
    <td rowspan="3" align="center" bgcolor="#0066CC" class="text-rotation">MINUS</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>

score 2 · Accepted Answer

簡単なモックアップ:

    <table border="1">
    <tr>
        <td colspan="6">STOCK RANGE</td>
        <td colspan="11">LENS PROPERTIES</td>        
    </tr>
    <tr>
        <td colspan ="2">SPHERICAL</td>
        <td colspan ="2">SPH/CYL</td>
        <td colspan ="2">SPH/CYL</td>
        <td rowspan="2">Stock</td>
        <td rowspan="2">Disclaimer</td>
        <td rowspan="2">Index</td>
        <td rowspan="2">UV Coating</td>
        <td rowspan="2">FOOBAR</td>
        <td rowspan="2">FOOBAR</td>
        <td rowspan="2">FOOBAR</td>
        <td rowspan="2">FOOBAR</td>
        <td rowspan="2">FOOBAR</td>
        <td rowspan="2">FOOBAR</td>
        <td rowspan="2">FOOBAR</td>
    </tr>
    <tr>
        <td>LEFT1</td>
        <td>LEFT2</td>
        <td>LEFT3</td>
        <td>LEFT4</td>
        <td>LEFT4</td>
        <td>LEFT5</td>
    </tr>
    <tr>
        <td>DATA_LEFT_1</td>
        <td>DATA_LEFT_2</td>
        <td>DATA_LEFT_3</td>
        <td>DATA_LEFT_4</td>
        <td>DATA_LEFT_5</td>
        <td>DATA_LEFT_6</td>
        <td>DATA_RIGHT_1</td>
        <td>DATA_RIGHT_2</td>
        <td>DATA_RIGHT_3</td>
        <td>DATA_RIGHT_4</td>
        <td>DATA_RIGHT_5</td>
        <td>DATA_RIGHT_6</td>
        <td>DATA_RIGHT_7</td>
        <td>DATA_RIGHT_8</td>
        <td>DATA_RIGHT_9</td>
        <td>DATA_RIGHT_10</td>
        <td>DATA_RIGHT_11</td>
    </tr>
</table>

EDIT 2:これのいくつかのビジュアル: jsFiddle

編集 3: 他の回答が組み込まれたいくつかの新しいビジュアル: jsFiddle。

score 0 · Accepted Answer

非レガシー IE でアイテムを回転すると、要素を回転する前にそのプロパティが計算されます。これは、アイテム全体と背景がドキュメントフローの外側に移動することを意味し、おそらくテーブルで必要なものではありません。次のように、セル自体ではなく、セルの内容を回転させてみてください。

.text-rotation > * {
        -webkit-transform: rotate(90deg); 
        -moz-transform: rotate(90deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
        -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
        height:inherit;
}

display:block...そして、セルの内容の周りに一般的なラッパーを追加します...

<td rowspan="3" align="center" bgcolor="#66CC00" class="text-rotation"><div>MINUS</div></td>
<td rowspan="3" align="center" bgcolor="#66CC00" class="text-rotation"><div>PLUS</div></td>
<td rowspan="3" align="center" bgcolor="#FFCC00" class="text-rotation"><div>MINUS</div></td>
<td rowspan="3" align="center" bgcolor="#FFCC00" class="text-rotation"><div>PLUS</div></td>
<td rowspan="3" align="center" bgcolor="#0066CC" class="text-rotation"><div>PLUS</div></td>
<td rowspan="3" align="center" bgcolor="#0066CC" class="text-rotation"><div>MINUS</div></td>

html - html でこのような表を作成する方法、または表のない表を作成する方法

2 に答える 2

Related

Reference