質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.02%

html、css tableの画像配置について

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 906

pa29monster

score 5

kei344さんに教えて頂いたやり方でうまくいきました。
皆さんもご協力ありがとうございました。

htmlを触り始めて一ヶ月ぐらいの初心者です。
参考書やネットで調べながら少しずつホームページを作っています。

ここで本題です。 
イメージ説明

見にくいですが図の上の左ようにtable内の各セルに画像を配置し、両サイドの縦列A,Cを図の上の右のようにtableのレイアウトを変えずにマウスオーバーで拡大するようにCSSとhtmlで設定しました。
ですがローカル環境で見てみると、Firefoxでは思い通りに見れるのですがIEでは図の下のようにA,C画像が上にずれ、画像の中心が上の罫線乗っかるような形になってしまいます。マウスオーバーは正常に効きます。

テーブルのhtml、CSSのスタイルはこのような感じです。
上記の図とは多少ことなりますが貼っておきます。
実際のテーブルにはAの左手前に名前欄とCの右後にリンクボタンが付いてあるので一応下記のスタイルに書いておきました。

<table>
 <tbody>

 <tr>
   <td class="title01" colspan="5">
    タイトル名
   </td>
 </tr>

  <tr>
   <td width="170">
    名前
   </td>
   <td width="110">
    A
   </td>
   <td width="190">
    B
   </td>
   <td width="110">
    C
   </td>
   <td width="90">
    PAGE JUMP
   </td>
  </tR>

  <tr>
   <td class="nameA">
    NAME
    <span class="nameA">NAMEの補足</span>
   </td>

   <td class="A">
    <img src="A.jpg">
   </td>

   <td class="B">
    <img src="B.jpg">
   </td>

   <td class="C">
    <img src="C">
   </td>

   <td class="pagejunp">
    <a href="http:・・・">
      <img src="pagejunp.jpg" style="width:75px;">
     </a>

     <a href="http:・・・">
      <img src="pagejunp02.jpg" style="width:75px;">
     </a>

   </td>
  </tr>

 </tbody>
</table>
table td{
 border:2px solid #715500;
}

table td.title01{
 background:url(tytle01.jpg) repeat;
 background-size:contain;
 color:white;
 height:30px;
 font-size:18px;
 font-weight:bold;
}

table td.nameA{
 width:100px;
 color:black;
 font-size:14px;
 text-align:left;
 padding-left:10px;
 font-weight:bold;
 line-height:1.5;
 background-color:#FFFECD;
}

td span.nameA{
 display:block;
 color:black;
 font-size:11px;
 text-align:right;
 padding-right:20px;
 margin:5px 0 10px;
 border-bottom:1px solid red;
 padding-bottom:5px;
 width:140px;
}

table td.A{
 position:relative;    
 height:100;
}

table td.A img{
 width:110px; 
 position:absolute; 
 top:0; 
 left:0; 
 right: 0;
 bottom: 0;
 margin:auto; 
 transition:0.2s; 
 text-align:center;
 vertical-align:middle; 
}

table td.A img:hover{
 width:156px; 
 z-index:9999; 
} 

table td.B_size{
 width:200px;
 height:100px;
 background:url(back.png) no-repeat;
 background-size:35px;
}

table td.B img{
 width:200px;
}

table td.C{
 position:relative;
 height:100px;
}

table td.C img{
 width:110px; 
 position:absolute; 
 top:0; 
 right:0;
 left: 0;
 bottom: 0;
 margin:auto; 
 transition:0.2s; 
}
table td.C img:hover{
 width:156px; 
 z-index:9999; 

table td.pagejunp{
 width:100px;
 height:100px;
}

table td.pagejunp img{
 padding:4px;
}


何か間違いはあるでしょうか?
もっと別の簡単スタイルシート等あると思いますが頭がパニックに
なるのでこのスタイルをベースに訂正等お願いします。
ちなみにDOCTYPEというのも最新をちゃんと設定ししました。
可能性の話でもいいです。わかる範囲内で回答お願いします。
初心者なもので出来るだけ分かりやすく教えて頂けるとうれしいです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2016/07/16 15:12

    動作確認をしたIEのバージョンはどれですか?

    キャンセル

  • pa29monster

    2016/07/16 15:31

    IE11です。

    キャンセル

  • kei344

    2016/07/16 15:42

    回答が付いた質問の編集は慎重に行ってください。質問文のコードについて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。

    キャンセル

回答 3

+1

</body>
</table>

</tbody> // <- ここ
</table>

HTMLが文法的に破綻しているので、

http://www.htmllint.net/html-lint/htmllint.html#

上記のようなツールを使ってチェックしてください。
HTMLが正しくないと、CSSやJavaScriptは意図したように動作しません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/07/16 15:43

    tが抜けていたのはこちらにコピーするときの間違いでした。
    実際のデーターは抜けていませんでした。

    教えて頂いたツールはサーバーにアップしていないローカル環境にあるデーターはできないのでしょうか?

    キャンセル

checkベストアンサー

0

【<th>や<td>にpositionの指定はできません - blogですかい】
http://oh-sky.hatenablog.com/entry/2013/11/07/095209

このあたりを御覧ください。


追記:

動くサンプル:https://jsfiddle.net/1bmeboyy/1/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/07/16 16:41

    何度もすいません
    そしてありがとうございます。

    内包するんですね
    こちらでいいでしょうか?
    やってみたのですが特に変化がありませんでした。
    ```
    <td class="A">
    <div>
    <img src="A.jpg">
    </div>
    </td>
    ```
    ```
    table td.A{
    position:relative;
    height:100;
    }

    table td.A div img{
    width:110px;
    position:absolute;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    margin:auto;
    transition:0.2s;
    text-align:center;
    vertical-align:middle;
    }

    table td.A div img:hover{
    width:156px;
    z-index:9999;
    }
    ```

    キャンセル

  • 2016/07/16 17:33

    「table td.A{」⇒「table td.A div {」ですね。

    質問文にある、テーブル内の「</tR>」は「</tr>」、CSSの「table td.C img:hover{」は閉じ括弧「}」が足りません。

    また、図で描かれているものとHTMLのコードが違いますが、出来るだけ同じものを提示されたほうが良いと思います。

    あと、コメント欄でコードを書かず、質問文に追記したほうが他の回答者にも読みやすいので、次からはそうしてもらえるとありがたいです。

    IE/Firefoxで同じように表示できるものを追記しておいたので、よければ御覧ください。

    キャンセル

  • 2016/07/16 17:52

    いろいろとありがとうございいます。
    このサイト自体もまだ慣れておらず、ご迷惑おかけしました。
    教えて頂いたやり方を一度ためしてみます。

    キャンセル

0

table td.A img{
 width:110px; 
 position:absolute; 
 top:0; 
 left:0; 
 right: 0;
 bottom: 0;
 margin:0 auto; /* ここを変更 */
 transition:0.2s; 
 text-align:center;
 vertical-align:middle; 
}


これでとりあえずそれっぽくなると思います。
なんでこうなるのかについては考え中。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/07/16 17:15

    回答ありがとうございます。
    確かにそれっぽくなりました。
    微調整してみます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.02%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる