table中の position による配置と考察

html

table 中の、tdタグ中の画像を重ねようとしたときの話です。

/* スタイルシート */
div.demo_img {
    position: relative;
    left:-195px;
}
<td><img src="xxx"/></td>
<td><div class="move"><a href="yyy"><img src="xxx"/></a></div></td>

上記のように、table内で画像を重ねようとしたところ、firefox では問題ないのですが、IE では、うまく重なりませんでした。

詳しい原因は table系にはposition:relativeが効かない に紹介されていました。

これを知らないことにより、後で画面の変更が起きたら大変ですね。。

危ないところでした。


しかし、今回は、どうしてもtable内で重ねたかったので、その対策を残しておきます。

ちなみに

<td>
<img src="xxx"/>
<a href="yyy"><img class="move" src="xxx"/></a>
</td>

のように、１つのtdタグ内に収めれば、それでも問題はないのですが、 aタグで改行されてしまいます。

改行されるとY軸もposition で位置を変更しなければなりません。そうなると保守性が低くなる為却下です。


ということで、今回の目標です。

td内で、画像をposition指定で重ねたい。ただし、移動は　X軸　のみ

やり方は、思いつくところで、２つ。

  • javascriptにて、positionの移動を変更する
  • ｔｄタグひとつの中で、うまく画像を重ねる（ただし、改行させないようにする）
  • 最後に・・・

どうでもいいことですが、なんでも１つのやり方しか考えないのは良くないと思うので、良くないとわかっていながらも、javascriptで移動させる方法を試しています。。

javascriptにて、positionの移動を変更する
<script language="JavaScript">
<!--
var isMSIE = /*@cc_on!@*/0;

function updateIECss() {
    // IE以外は対象外
    if ( !isMSIE ) {
        return;
    }
    //IEは、table系に問題あるので、スタイルを変更する
    var cssObj = document.styleSheets[0].cssRules;
    var csslen = cssObj.length;
    for ( var cnt = 0; cnt < csslen; ++cnt ) {
        var css = cssObj[cnt];
        var left = css.style.left;
        // left指定が無いものは対象外
        if ( left == "" ) {
            continue;
        }

        var intleft = parseInt(left);
        // IEは、さらに、９５ピクセル左に移動させてみる
        var ieleft = intleft + 95;
        css.style.left = ieleft + "px";
    }
}

// IEのスタイルシートを更新
updateIECss();
-->
</script>

これは、javascriptを使って、移動する距離を変更してみました。

注：IE用のスタイルシートという案は考えていませんでした。

しかし、ソースを見てみると分かりますが、 95ピクセル移動って。。すごいマジックナンバーが入っていますね。。

ということで、これも却下ですね。。

ｔｄタグひとつの中で、うまく画像を重ねる（ただし、改行させないようにする）

本命です。

/* スタイルシート */
ul.thumbnail {
  padding: 0;
}
ul.thumbnail li {
  display: inline;
  margin: 0;
  padding: 0;
}

<ul class="thumbnail">
  <li><a href="http://www"><img class="thumbnail" src="xxx.png"></a></li>
  <li><img src="yyy.png"/></li>
</ul>

結局、tdタグの中で、リストを作り、そのリスト(ul）をinlineで表示させることにより、改行させないようにしました。

あとは、スタイルシートで 移動させるだけです。

最後に・・・

この「最後に」の項目は、全てが書き終えた後に、追記したものです。

div.thumbnail {
    width:200px;
    height:150px;
    background:url("画像のURL") no-repeat; /*１回のみ表示*/
    background-position : center center;   /*画像を中央表示*/
    display:table-cell;                    /*div内で囲まれている中も中央表示*/
    vertical-align:middle;
}

上記のように、display:table-cell 、または、float を使うことにより、もっとよく出来ると思います。

今回はIEとfirefoxでの違いの部分で困ったという経験を忘れないようにするため意味も込めてのメモです。

最後に、今後のためにも最低限 positon や IE、firefoxの違い等、再度勉強しなおした方がいいのかなと思いました。