tbodyのテーブルのボディの高さを設定する

-1

テーブルのボディの高さを固定してスクロール可能にしようとしています。基本的に私は3つのテーブルを持っています。そのうち2つは上に、横には3つ、下には3つあります。テーブルボディの高さを固定（たとえば300px）にしたいが、私はこの効果を出すことができない。私はいろいろな方法を試しましたが、そのほとんどはテーブルレイアウトの見た目を破壊しています。これは私のコード -tbodyのテーブルのボディの高さを設定する

<div id="DashboardTab" style="display: table-layout;"> 
      <div style="display: inline-block; width: 100%;"> 
       <div id="" style="float: left; width: 50%; "> 
        <legend>Planned</legend> 
        <table id="ePlanned""> 
         <thead> 
          <tr> 
           <th>Col1</th> 
           <th>Col2</th> 
           <th>Col3</th> 
           <th>Col4</th> 
          </tr> 
         </thead> 
         <tbody><!-- style="height: 300px; overflow: auto">--><!--tried this and other ways but not working--> 
          <tr> 
           <td>MX1</td> 
           <td>MX2</td> 
           <td>MX3</td> 
           <td>MX4</td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 

       <div id="" style="float: right; width: 50%;"> 
        <legend>Closed</legend> 
        <table id="eClosed" > 
         <thead> 
          <tr> 
           <th>Col1</th> 
           <th>Col2</th> 
           <th>Col3</th> 
           <th>Col4</th> 
          </tr> 
         </thead> 
         <tbody></tbody> 
        </table> 
       </div> 
      </div> 

      <div id="" style="display: inline-block; width: 100%; overflow: auto;"> 
       <legend>Stats</legend> 
       <table id="uStats" class="display" cellspacing="0" width="102.5%"> 
        <thead> 
         <tr> 
          <th>Col1</th> 
          <th>Col2</th> 
          <th>Col3</th> 
          <th>Col4</th> 
          <th>Col5</th> 
          <th>Col6</th> 
         </tr> 
        </thead> 
        <tbody></tbody> 
       </table> 
      </div> 
     </div>

であり、また、それは2つのテーブルの上に整列されますので、私は102.5パーセントの第三表の幅を作ったが、私はその良くない習慣を知っています。誰も私にこれを手伝ってもらえますか？私はまた多くの時間を無駄にしました。私のページを下の写真のようにしたい。

出典

2016-11-11 RATHORE

あなたはoverflow:autoに、各テーブルのラッパーdivを設定し、各テーブルに固定heightを設定する必要があります。

これが可能なソリューションです：

<div id="DashboardTab" style="display: table-layout;"> 
 
      <div style="display: inline-block; width: 100%;"> 
 
       <div id="" style="float: left; height:100px; width: 50%; overflow: auto;"> 
 
        <legend>Planned</legend> 
 
        <table id="ePlanned"> 
 
         <thead> 
 
          <tr> 
 
           <th>Col1</th> 
 
           <th>Col2</th> 
 
           <th>Col3</th> 
 
           <th>Col4</th> 
 
          </tr> 
 
         </thead> 
 
         <tbody> 
 
          <tr> 
 
           <td>MX1</td> 
 
           <td>MX2</td> 
 
           <td>MX3</td> 
 
           <td>MX4</td> 
 
          </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
           <td>MX1</td> 
 
           <td>MX2</td> 
 
           <td>MX3</td> 
 
           <td>MX4</td> 
 
          </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
           <td>MX1</td> 
 
           <td>MX2</td> 
 
           <td>MX3</td> 
 
           <td>MX4</td> 
 
          </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
           <td>MX1</td> 
 
           <td>MX2</td> 
 
           <td>MX3</td> 
 
           <td>MX4</td> 
 
          </tr> 
 
\t \t \t \t \t \t \t 
 
         </tbody> 
 
        </table> 
 
       </div> 
 

 
       <div id="" style="float: right; height:100px; width: 50%; overflow: auto;"> 
 
        <legend>Closed</legend> 
 
        <table id="eClosed" > 
 
         <thead> 
 
          <tr> 
 
           <th>Col1</th> 
 
           <th>Col2</th> 
 
           <th>Col3</th> 
 
           <th>Col4</th> 
 
          </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
           <td>MX1</td> 
 
           <td>MX2</td> 
 
           <td>MX3</td> 
 
           <td>MX4</td> 
 
          </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
           <td>MX1</td> 
 
           <td>MX2</td> 
 
           <td>MX3</td> 
 
           <td>MX4</td> 
 
          </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
           <td>MX1</td> 
 
           <td>MX2</td> 
 
           <td>MX3</td> 
 
           <td>MX4</td> 
 
          </tr> 
 
\t \t \t \t \t \t \t 
 
         </thead> 
 
         <tbody></tbody> 
 
        </table> 
 
       </div> 
 
      </div> 
 

 
      <div id="" style="display: inline-block; height:100px; width: 100%; overflow: auto;"> 
 
       <legend>Stats</legend> 
 
       <table id="uStats" class="display" cellspacing="0" style="width:100%"> 
 
        <thead> 
 
         <tr> 
 
          <th>Col1</th> 
 
          <th>Col2</th> 
 
          <th>Col3</th> 
 
          <th>Col4</th> 
 
          <th>Col5</th> 
 
          <th>Col6</th> 
 
         </tr> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>MX1</td> 
 
\t \t \t \t \t \t \t <td>MX2</td> 
 
\t \t \t \t \t \t \t <td>MX3</td> 
 
\t \t \t \t \t \t \t <td>MX4</td> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>MX1</td> 
 
\t \t \t \t \t \t \t <td>MX2</td> 
 
\t \t \t \t \t \t \t <td>MX3</td> 
 
\t \t \t \t \t \t \t <td>MX4</td> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>MX1</td> 
 
\t \t \t \t \t \t \t <td>MX2</td> 
 
\t \t \t \t \t \t \t <td>MX3</td> 
 
\t \t \t \t \t \t \t <td>MX4</td> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>MX1</td> 
 
\t \t \t \t \t \t \t <td>MX2</td> 
 
\t \t \t \t \t \t \t <td>MX3</td> 
 
\t \t \t \t \t \t \t <td>MX4</td> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>MX1</td> 
 
\t \t \t \t \t \t \t <td>MX2</td> 
 
\t \t \t \t \t \t \t <td>MX3</td> 
 
\t \t \t \t \t \t \t <td>MX4</td> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t 
 
        </thead> 
 
        <tbody></tbody> 
 
       </table> 
 
      </div> 
 
     </div>

は、この情報がお役に立てば幸い！

出典

2016-11-11 17:59:29

を助け、あなたは私がちょうどたい基本的に私の目標ではないスクロール可能ブロックにdiv要素を入れていますスクロール可能なテーブル本体。たびにあなたのケースではない列の属性を表示する必要があります – RATHORE

使用表示：希望.ITはあなたの仕事が容易になり

#DashboardTab { 
 
    display: flex; 
 

 
    margin:20px; 
 
} 
 
.item{ 
 
width:50%; 
 
    border:1px solid black; 
 
    margin:10px; 
 
} 
 
#DashboardTab table{ 
 

 
} 
 
#DashboardTab table, 
 
tr, 
 
td { 
 
    border: 1px solid black; 
 
    margin: 20px; 
 
} 
 
#table3 { 
 
    display: flex; 
 

 
    border: 1px solid black; 
 
    justify-content:center; 
 
} 
 
#table3 div { 
 
    flex-shrink: 1; 
 
    width: 100%; 
 
    overflow: auto; 
 
    margin: 50px; 
 
} 
 
#table3 table, 
 
tr, 
 
td {}

<div id="DashboardTab"> 
 
    <div class="item"> 
 
    <legend>Planned</legend> 
 
    <table id="ePlanned"> 
 
     <thead> 
 
     <tr> 
 
      <th>Col1</th> 
 
      <th>Col2</th> 
 
      <th>Col3</th> 
 
      <th>Col4</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <!-- style="height: 300px; overflow: auto ">--> 
 
     <!--tried this and other ways but not working--> 
 
     <tr> 
 
      <td>MX1</td> 
 
      <td>MX2</td> 
 
      <td>MX3</td> 
 
      <td>MX4</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
    <div class="item"> 
 
    <legend>Closed</legend> 
 
    <table id="eClosed "> 
 
     <thead> 
 
     <tr> 
 
      <th>Col1</th> 
 
      <th>Col2</th> 
 
      <th>Col3</th> 
 
      <th>Col4</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody></tbody> 
 
    </table> 
 
    </div> 
 

 
</div> 
 

 

 

 
<div id="table3"> 
 
    <div> 
 
    <legend>Stats</legend> 
 
    <table id="uStats " class="display " cellspacing="0 " width="102.5% "> 
 
     <thead> 
 
     <tr> 
 
      <th>Col1</th> 
 
      <th>Col2</th> 
 
      <th>Col3</th> 
 
      <th>Col4</th> 
 
      <th>Col5</th> 
 
      <th>Col6</th> 
 
     </tr> 
 
     </thead> 
 

 
     <tbody> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>1</td> 
 
      <td>1</td> 
 
      <td>1</td> 
 
      <td>1</td> 
 
      <td>1</td> 
 
     </tr> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>1</td> 
 
      <td>1</td> 
 
      <td>1</td> 
 
      <td>1</td> 
 
      <td>1</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>

を曲げ、これはここに

出典

2016-11-11 18:05:18 Geeky

私はあなたの答えで起こっていない空間の半分を取るテーブルをしたい、私はこれを試していた。私は同じサイズのテーブルを作成することで自分のページが良く見えるようにしたい – RATHORE

あなたはすべてのテーブルがスペースの半分を取るべきであることを意味します – Geeky

コードを修正しました。 – Geeky

tbodyのテーブルのボディの高さを設定する

答えて

関連する問題