5

列見出しのあるHTMLテーブルを作成しようとしていますが、各列見出しのタイトルが長くなっています。各列のタイトルを斜めにしたいと思います。すべてのブラウザ（Firefox、IE7＆8など）で機能するこの効果を実現するためのcss（またはjava、jqueryなど）があるかどうか、およびその実装方法を知りたいです。

これが私が作成したいものの視覚的な例です。斜めのタイトルヘッドを持つテーブル

私はこれをstackexchangeで見つけましたが、これをうまく利用する方法を理解できませんでした。また、自分がやりたいことに適用できるかどうかも判断できませんでした。

https://tex.stackexchange.com/questions/14288/how-combine-make-diagonal-column-heads-in-table-with-multicolumn-headers

4

3 に答える 3

2

斜めにしたいテキストを別の要素でラップします。たとえば、その要素<div>でCSSを実行します。MDNtransformを参照してください。

于 2012-09-24T20:09:56.973 に答える
0

試す

   .vertical
    {
    writing-mode:tb-lr;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    white-space:nowrap;
    display:block;
    bottom:0;
    width:90px;
    height:120px;   
    position:relative;
    left:90px;
    top:80px;
}

見るWorking DEMO

参照

于 2012-09-24T20:16:56.193 に答える
0

最新のブラウザにはCSS3を使用します。

-moz-transform:rotate(70deg);
-webkit-transform:rotate(70deg);
-o-transform:rotate(70deg);
-ms-transform:rotate(70deg);
transform(70deg);

IE用のフィルター（残念ながら、IE6と互換性があるかどうか、およびそれがどの程度正確に機能するかはわかりません）：

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.5);

MSDNソース： http： //msdn.microsoft.com/en-us/library/ms532918 （v = vs.85）.aspx

于 2012-09-24T20:18:36.380 に答える