5

テーブルヘッダーにtransform：rotate（270deg）を使用しましたが、そのヘッダーの名前が等しくない（近くにない）ため、見栄えが悪く、すべての列を同じ幅にする必要があります。テーブルヘッダーの一部のテキストは2〜3語で構成されており、一部は1語です。

これがどのように見えるかです：http：//img571.imageshack.us/img571/9527/tbl.png

私が欲しいのは、ヘッダーの名前の長さに関係なく、すべての列の幅が同じであり、名前が最大2行になることです。

編集：例：

http://jsfiddle.net/SvAk8/

.header {


-webkit-transform: rotate(270deg);  
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(27deg);
transform: rotate(270deg); 
white-space: pre-line; 
width: 50px;
height: 180px; /* to be adjusted: column is not always tall enough for text */
margin: 0 -80px;
vertical-align: middle;

}

4

3 に答える 3

3

この仕様を追加します。

table { width: 100%; table-layout: fixed; }

table-layout: fixed;これを行います：

テーブルと列の幅は、テーブル要素と列要素の幅、またはセルの最初の行の幅によって設定されます。後続の行のセルは列幅に影響しません。

指定された幅が必要です。詳細については、 https：//developer.mozilla.org/en-US/docs/CSS/table-layoutを参照してください。

于 2013-01-11T19:26:25.873 に答える
1

それは私がこれまでに得たものの中で最高です：

$(document).ready(function () {

  (function () {
    var maxW = 0,
      maxH = 0;

    $("td.header").each(function () {

      $cell = $(this);

      $dummyDiv = $("<div></div>", {
        text: $cell.text()
      });

      // Replaces the original text for a DummyDiv to figureout the cell size before the rotation
      $cell.html($dummyDiv);

      if ($cell.width() > maxW) maxW = $cell.width();
      if ($cell.height() > maxH) maxH = $cell.height();
    });

    $("td.header").each(function () {
      // Applies the rotation and then the size previosly calculated
      $(this)
        .addClass("rotate")
        .width(maxH + 10)
        .height(maxW + 10);
    });
  })();
});

ここでライブデモを見ることができます：http：//jsfiddle.net/Lrr3G/

私はそれが役立つことを願っています:)

于 2013-01-11T23:31:45.243 に答える
-1

わかった！調査を行いましたが、ブラウザは変換後に寸法を計算しないようです。

テーブル内のヘッダーとしてテキストを回転させる（クロスブラウザー）

オプションは1つだけだと思います。javascript;

適切な行の高さを見つけ、ページの読み込み後に幅のサイズを変更します。

于 2013-01-11T18:30:48.347 に答える