匿名質問者
匿名質問者匿名質問者とは「匿名質問」を利用して質問した質問者。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら

1354703850 HTMLの構文で入れ子のTABLEを作成したいのですがうまくいきません。

画像の左のような構造で、結果的に右のようなTABLEを作成したいと考えています。

TABLEは赤線のものと、青線のもの、橙線のものの3つがあります。
赤線のテーブルの中に、青線のものと、橙線のものがあります。
赤線のテーブルの右がTRでわけられており、橙線のものはその中にそれぞれ入っています。

わざわざこのような構造にしたのは、橙線のテーブルは数が不定でJavascriptde操作しており
動的に数が変化するので、その際に高さを常に100%にしたく、このような構造にしました。

また、右側の結果をみていただくとわかるのですが、ボーダーは結果的には重ねて1本のように見せています。

どうしもてOperaなどでボーダーのずれが出るなどして完成できません。

詳しい方サンプルをいただけないでしょうか。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/12/05 19:37:30
  • 終了:2012/12/06 09:11:00

ベストアンサー

匿名回答3号 No.1

匿名回答3号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2012/12/06 04:37:53

おっしゃる条件で素直に組むと、確かに Opera でずれが発生しました。私の場合は右の table の下部が 1px 空いてる感じでした。何なんでしょうね。

解決策は何パターンかあると思いますが、今回は table に border を指定せず、セルの 2 辺に border をあててやってみました。

http://jsfiddle.net/zRjEZ/

一部に style 属性を使っているので注意して見て下さい。 Chrome、Firefox、Opera、IE8 で確認しましたが、一見出来ている様に思います。しかし、左の table (青) に要素を突っ込むとまた色々問題が見えてきてしまう気もします。

匿名質問者

お教えいただいたものを若干修正しまして無事目的どおりの形となりました。
ありがとうございました。

2012/12/06 09:11:36
  • 匿名回答1号
    匿名回答1号 2012/12/05 19:46:42
    CSSにてそれぞれのセルにボーダーを設定する方法で良さそうな気がしますが、現状はどのように設定していますか?
  • 匿名質問者
    匿名質問者 2012/12/05 20:27:03
    いろいろと試したのであれなのですが、
    現状はそれぞれのTABLEにBORDERの設定を行ったり、重複する部分は表示しない設定などを駆使しているのですが、
    どうしても外枠の左右のTABLEの高さが、OEPRAの場合だけ1PXだけ(おそらく)ずれているようです。

    それを直すとほかがまたずれてしまいます。

  • 匿名回答2号
    匿名回答2号 2012/12/05 20:36:31
    table の入れ子にするんじゃなくて、ひとつの table で、rowspan でぶち抜く、んじゃ駄目なの?
  • 匿名質問者
    匿名質問者 2012/12/05 20:54:06
    ちょっと組み合わせている仕組みでどうしてもTABLE構造で構築する必要があるんです。
    おっしゃるとおり、1テーブルで実現するだけならなんてことはないのですが
  • 匿名回答2号
    匿名回答2号 2012/12/05 21:08:08
    ・それぞれの table で cellpadding=0、cellspacing=0 にする
    ・table のスタイルで border-collapse: collapse にする
    ・内側に入る table のスタイルで、border: none にする(外側の border だけ無しにする)
    って感じじゃ駄目なのかな?

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません