親が幅をパーセントで持つ場合、テーブルを100％幅にする

テーブルの幅が100％の問題があります。コンテンツの幅をピクセル単位で指定していますが、すべてのサブディビジョンはパーセントで表示されます。親が幅をパーセントで持つ場合、テーブルを100％幅にする

#content{ 
 
     position: fixed; 
 
     float: left; 
 
     top: 116px; 
 
     width: calc(100% - 125px); 
 
     height: calc(100% - 124px); 
 
     background-color: #bdc9ce; 
 
    } 
 
    .size-3{ 
 
     width: 33.333%; 
 
    } 
 
    .inputs-root{ 
 
     width: 100%; 
 
    } 
 
    .input-table{ 
 
     width: 100%; 
 
    }

<div id="content"> 
 
     <div class="size-3"> 
 
     <div class="inputs-root"> 
 
      <tbody class="input-table"> 
 
      <tr>.... 
 
      </tr> 
 
      </tbody> 
 
     </div> 
 
     </div> 
 
    </div>

だから私は、なぜ、テーブルの幅が長い.inputs-root以外で...任意のヒント、分からないのですか？私もとword-breakを設定しようとしましたが、それでも同じ

EDIT

MY CODE：

が全体入力のリストのレンダリング - 単一入力のレンダリングhttp://pastebin.com/jZvzdgyT

- http://pastebin.com/DEmAdiD2 反応しているので、レンダリングメソッドを見てください

PICTURES

まだ親のdivの

親のdivのより大きい -

出典

2016-12-16 Lukáš Unzeitig

コード全体を追加できます – ab29007

コードに

タグが見つかりませんでした。 –

@PraveenMurali私は今ブラウザの中でそれを設定しようとしています。tbody要素を設定しています。 –

答えて

あなたのテーブルのCSSを以下しているしている場合、この

table{ 
    display:block; 
}

これを削除taのデフォルトの表示モードを上書きするBLE（display:table）

この問題を解決する可能性があります

出典

2016-12-16 09:25:17 ab29007

デフォルトではtbodyが表示しています：table-row-groupと私はこれを取り除くことができないので、、いずれかのヒント？：D –

私は完全なコードを持っていれば良いでしょう。あなたは、テーブルのコード – ab29007

とフィドルを設定することができ、あなたのテーブルの行の 'をラップ

タグ – ab29007

使用<table>を削除することがdiv.size-3の細かい

=>幅を作品のタグは、のdiv＃コンテンツ
==> div.input-rootの幅はdiv.sizeの100％です。divの内容の33％です。
===> div.input-tableの幅はdiv.input-rootの100％です。それはdiv＃コンテンツの33％です。

以下のスニペットを追加しました。

#content{ 
 
     position: fixed; 
 
     float: left; 
 
     top: 116px; 
 
     width: calc(100% - 125px); 
 
     height: calc(100% - 124px); 
 
     background-color: #bdc9ce; 
 
    } 
 
    .size-3{ 
 
     width: 33.333%; 
 
    } 
 
    .inputs-root{ 
 
     width: 100%; 
 
    } 
 
    .input-table{ 
 
     width: 100%; 
 
     background-color:red; 
 
    }

<div id="content"> 
 
     <div class="size-3"> 
 
     <div class="inputs-root"> 
 
      <table class="input-table"> 
 
      <tbody > 
 
       <tr>.... 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </div> 
 
     </div> 
 
    </div>

出典

2016-12-16 09:35:16

@LukášUnzeitigの画像はうまくいきません。コードをもっと投稿すれば、絶対的な解決策が得られます。 –

最後に見つかったソリューション、私はちょうどそれが入力の幅が最小幅をブロックしていることになります、100％に内部の幅を設定する必要があります。

出典

2016-12-16 12:30:29

親が幅をパーセントで持つ場合、テーブルを100％幅にする

答えて

関連する問題