2

この表の幅を 100% に設定しています。内部には 3 つの列があり、中央の列は 300px に固定する必要があります。左と右の列は、残りのスペースで均等に分割する必要があります。

その結果、画像の列が引き伸ばされます。左と右の列が同じサイズのままになるようにこれを修正するにはどうすればよいですか?

http://jsfiddle.net/RqhCv/

重要な注意: 左の列にコンテンツを追加しないでください。コンテンツはそのままにしておく必要があります。 
また、IE7 で動作する必要があります。

DIV に関する回答を投稿しないでください。この質問はテーブルについてです。

   <table style="width:100%;height:100%;">
        <tr>
            <td bgcolor="#FF0000">&nbsp;</td>
            <td bgcolor="#99CC33" style="width:300px;">this is 300PX</td>
            <td bgcolor="#0000FF"><img src="http://www.google.com/logos/2012/kondratyuk-12-hp.jpg" width="377" height="167"></td>
        </tr>
    </table>

...

私はCOLGROUPを含む多くのことをすでに試しましたが、何もうまくいきません...

4

2 に答える 2

2

これは、右の列と左の列を同じサイズにし、中央の列を300pxにする場合に機能するようです。しかし、あなたがその画像で何をしたいのかわかりませんでした。 

<table style="width:100%;height:100%;table-layout:fixed;overflow:hidden" >
    <tr>
        <td bgcolor="#FF0000" style="width:50%;"></td>
        <td bgcolor="#99CC33" style="width:300px;"><div style="width:300px">this is 300PX</div></td>
        <td bgcolor="#0000FF" style="width:50%;" ><div style="overflow:scroll"><img src="http://www.google.com/logos/2012/kondratyuk-12-hp.jpg" width="377" height="167"></div></td>
    </tr>
</table>
于 2012-07-05T21:23:31.217 に答える
2

数時間の試行の後、このコードを作成することができました。

Webkit では左にわずかにシフトするだけで、すべてのブラウザーで動作しますが、私はそれを受け入れることができると思います。

これは危険に見えますし、まったく好きではありませんが、最新の Chrome、FF、Opera、IE9、IE8、IE7、Safari、および iPad の Safari でテストしました。すべて正常に見えます。

それでも、誰かがこれまたはより良い解決策について意見を持っている場合は、遠慮なく投稿してください。

<table style="width:100%;height:100%;">
    <tr>
        <td bgcolor="#FF0000" style="width:50%;">&nbsp;</td>
        <td bgcolor="#99CC33" style="width:300px;"><img src="p.png" width="300" height="1"></td>
        <td bgcolor="#0000FF"  style="width:50%;"><img src="http://www.google.com/logos/2012/kondratyuk-12-hp.jpg" style="display:block;" width="377" height="167"></td>
    </tr>

</table>
于 2012-07-05T23:15:33.120 に答える