在tbody中設置表格的身高

-1

我正在修復表格的身高並使其滾動。基本上我有三張桌子，其中兩個我想在上面，並排排列，第三個應該在他們下面。我想讓表體高度固定（比如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>

，也是我取得了第3臺寬度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

使用display：柔性。它使您的工作更輕鬆

#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中設置表格的身高

回答

相關問題