【ガラケー】tableの中で画像を均等に並べたい

Question

ガラケー（フィーチャーフォン）の開発をしています。
画像を3枚均等に横に並べたかったのですが、なぜか「%」がついてると実機で確認すると1枚目のtest1.jpgが横に大きく広がるので、「%」を外して対応しました。

修正前

<table>
  <tr>
    <td style="width:30%;"><img src="test1.jpg" style="width:100%;" /></td>
    <td style="width:30%;"><img src="test2.jpg" style="width:100%;" /></td>
    <td style="width:30%;"><img src="test3.jpg" style="width:100%;" /></td>
  </tr>
</table>

修正後

<table>
  <tr>
    <td style="width:30;"><img src="test1.jpg" style="width:100;" /></td>
    <td style="width:30;"><img src="test2.jpg" style="width:100;" /></td>
    <td style="width:30;"><img src="test3.jpg" style="width:100;" /></td>
  </tr>
</table>

ただ今度はエミュレータ(chrome/firemobilesimulator)で見ると、均等には並んでいるのですが画像が横に大きくはみ出してしまいます。
%を外すっていう適当な対応が原因だとは思うのですが、エミュレータではみ出すのはしょうがないでしょうか？

ググってもガラケーの技術情報があまりひっかからず、申し訳ないのですがどなたか教えて頂けないでしょうか。

端末はdocomo P-01Hです。

Answer 1

ガラケーのブラウザーに関する知識は全く持って持っていないけど、cssのwidthとかheightには必ず単位をつけるべきだと思います。width:30pxとか。
単位が%の場合はその要素の幅や高さが設定されている親もしくは親の親・・・の要素の幅や高さに対するパーセンテージという相対サイズになりますが、pxの場合は絶対サイズになりますので注意してください。

Comments

[tomoyuki123]

ありがとうございます。確かにその通りなんですが実機だと言うこと聞いてくれないんですよね。