以下は、 Chromeでのhttp://jsfiddle.net/mark69_fnd/LftRY/のスナップショットです。
住所用の内部テーブルが適切に引き伸ばされていないことに注意してください。右側が 1 ～ 2 ピクセル短くなっています。これは、css のテーブル要素に 100% 幅が指定され、パディング/マージンがないにもかかわらずです。
これらのテーブルを囲んでいるセルの完全なスペースを占有するにはどうすればよいですか?
編集
すべてのブラウザで何らかの問題が発生します。私のコードは、Chrome、IE9、Firefox のいずれでも適切なストレッチが表示されません。
EDIT2
Firefox - 同じ問題ですが、左側にあります:
IE9 - 同じ問題ですが、「請求先」の右側と「発送先」の左側にあります:
EDIT3
<div>すべての要素を適切に配置して引き伸ばすことができなかったため、テーブルに頼りました。説明されているすべての問題を解決し、テーブルベースのソリューションと同じように動作する返信を誰かが投稿した場合、私は喜んでそれを信用して採用します。
私はテーブルを使うのが好きというわけではありませんが、この場合はテーブルが断然最良のソリューションです。結局のところ、表示するのは表形式のデータです。
そのビーイングは、ここでネストされたテーブルを使用する必要はないと思います。それは単に物事を複雑にするだけです。colspans をそのまま使用し続けるだけで、同じ結果を簡単に得ることができます。また、あなたが今経験している国境の問題も解消します。これを見てください：http://jsfiddle.net/LftRY/21/
inputcssにもいくつかの変更が加えられていることに注意してください。すべてのボーダー、パディング、およびマージンを削除したので、幅を 100% に設定して、親と同じ幅にすることができました。また<br>、HTML のタグを削除し、入力をブロック要素として表示するように設定しました。絶対に必要な場合を除き、私は を使用するのはあまり好きではありません<br>(これはめったにありません)。
.no-lines境界線なしで表示したいセルまたは行で使用できるクラスも追加しました。ご覧のとおり、ヘッダーの 2 つのアドレス間の「ギャップ」と、例として追加したフッターでそれらを使用しました。必要に応じて、行全体で使用することもできます。
さらに、自由にthead、tbodyおよびtfootタグをテーブル html に追加しました。これにより、スクリーンリーダーを使用しているユーザーのアクセスが改善され、SEO が大幅に改善され、意味的にもより正確になります。
これがあなたの目的であることを願っています。そうでない場合は、お気軽にお問い合わせください。
これらのテーブルを囲んでいるセルの完全なスペースを占有するにはどうすればよいですか?
あなたはすでにやった。ただし、「囲んでいるセルの完全なスペース」がどうなるかを頭で考えていると、うめき声を上げているブラウザでは技術的に間違っています。
幅 100% で、完全に埋まっています。@bažmegakapa が上でコメントしたように、境界線の描画方法を再考する必要があります。
または、詳細を掘り下げて、試行錯誤しながらも、必要に応じて境界線を折りたたむ方法を学んでください。
