1

以下の形式でhtmlテーブルを作成したいと思います。

ここに画像の説明を入力

私はそれを行う方法を見つけることができません。誰でも私を助けることができますか？

4

2 に答える 2

5

私はあなたが完全にクロスブラウザの解決策を持つことができるとは思わない、とにかくこれを試してみてください：

.verticalText {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
}
<table border="1">
  <tbody>
    <tr>
      <td rowspan="4">
        <div class="verticalText">one</div>
      </td>
      <td>One</td>
      <td>Other</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Other</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Other</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Other</td>
    </tr>
  </tbody>
</table>

HTML部分では、属性「rowspan」を使用して、セル（td）にn行にまたがるように指示します。後続の「スパン」セルの相対セル宣言を削除する必要があります。同じことが属性「colspan」で水平方向に機能します。このような属性のデフォルト値は1であり、暗黙的です。

CSS部分は、画像に表示されるようにテキストを垂直方向にレンダリングしようとしますが、まだCSS標準ではないため、さまざまなブラウザで試す必要があります。完全な互換性を実現できない場合、テキストが動的でない場合は、そのテキストを画像ごとにレンダリングしなければならない可能性があります。

コメントに示されているように、テキストにコンテナを含めるようにHTMLを編集しました。

于 2012-12-03T09:48:48.490 に答える
2

ここでデモをrowspan確認してください

rowspan新しい行を追加するときに番号を変更する必要があります。

于 2012-12-03T10:37:46.343 に答える