- ベストアンサー
widthの％ or ピクセルを指定した場合の違いについて
- widthの％とピクセルを指定した場合の違いについて質問です。
- ソースコードの例を見ると、％指定では正常に表示されるが、ピクセル指定ではずれる現象が起きています。
- ピクセル指定でも正確に表示させるためにはどうすればいいのでしょうか？
- kamakuragengorou
- お礼率53% (132/248)
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは (1)widthに「％」を指定 <div style="width:330px;height:20px;overflow:hidden;"> <table cellpadding="0" border="1" style="width:300px;text-align:left;"> <tr> <td style="width:20%;">列1</td> <td style="width:20%;">列2</td> <td style="width:20%;">列3</td> <td style="width:20%;">列4</td> <td style="width:20%;">列5</td> </tr> </table> </div> <div style="width:330px;height:50px;overflow:auto"> <table cellpadding="0" border="1" style="width:300px;text-align:left;"> <tr> <td style="width:20%;">ああああああああああああああああああああああ</td> <td style="width:20%;">2</td> <td style="width:20%;">3</td> <td style="width:20%;">4</td> <td style="width:20%;">5</td> </tr><tr> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr><tr> <td>7</td> <td>8</td> <td>いいいいいいいいいいいいいいいいいいいいいい</td> <td>10</td> <td>11</td> </tr> </table> </div> (2)widthに「ピクセル」を指定 <div style="width:330px;height:20px;overflow:hidden;"> <table cellpadding="0" border="1" style="width:300px;text-align:left;"> <tr> <td style="width:55px">列1</td> <td style="width:55px">列2</td> <td style="width:55px">列3</td> <td style="width:55px">列4</td> <td style="width:55px">列5</td> </tr> </table> </div> <div style="width:330px;height:50px;overflow:auto"> <table cellpadding="0" border="1" style="width:300px;text-align:left;"> <tr> <td style="width:55px">ああああああああああああああああああああああ</td> <td style="width:55px">2</td> <td style="width:55px">3</td> <td style="width:55px">4</td> <td style="width:55px">5</td> </tr><tr> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr><tr> <td>7</td> <td>8</td> <td>いいいいいいいいいいいいいいいいいいいいいい</td> <td>10</td> <td>11</td> </tr> </table> </div> 列名のテーブル</tr>抜け styleを使用するときは**pxとした方がいいと思います table width:300px = td width:60px*5(300px) と考えがちですが実際にはボーダー分のpx数table内の幅が減りますのでtdのpx数を少し減らす必要があります（border="1"のボーダー1つで約4px) <td width="55"><td style="width:55px;">おそらくどちらでもいいと思いますがwidth="55"は非推奨属性なのでstyleの方がいいかな？(<table>の方は非推奨ではありません) あれでしたら<table>にstyle="table-layout:fixed;"を追加してもいいですし・・・ ただ55pxを超える半角英数字の連続を使用した場合、レイアウトは崩れます（＞＜）(table-layout:fixed;未指定) 指定の場合はIEは超えた分は見えなくなり他のでは隣のセルにはみ出ます（tdにoverflow指定する必要有り？) （word-breakなどの手もありますがIE専用になります) http://www.htmq.com/style/word-break.shtml
