表td不是100％

我想知道爲什麼我的td沒有在我的表中獲得100％。表td不是100％

這段代碼有存在的必要：

.table-scroll tbody { 
    display: block; 
    overflow-y: scroll; 
    height: calc(100% - 130px); 
}

這種情況發生時，我使用顯示塊，反正我試過很多東西和td仍然沒有得到表

的jsfiddle的100％：https://jsfiddle.net/zuxq2gr0/1/

CSS：

.panel-table { 
    height:auto; 
    width:300px; 
    border: 1px solid red; 
} 

.table-scroll tbody { 
    display:block; 
    overflow-y: scroll; 
    height: calc(100% - 130px); 
}

HTML：

<!doctype html> 
    <html> 
     <head> 
     <title>Aurelia</title> 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     </head> 
     <body> 
     <div class="panel-table"> 
      <table class="table table-scroll"> 
      <thead> 
      </thead> 
      <tbody> 
       <tr> 
       <td>Joseph</td> 
       </tr> 
       <tr> 
       <td>Mary</td> 
       </tr> 
       <tr> 
       <td>Judy</td> 
       </tr> 
       <tr> 
       <td>Judy</td> 
       </tr> 
       <tr> 
       <td>Judy</td> 
       </tr> 
       <tr> 
       <td>Judy</td> 
       </tr> 
       <tr> 
       <td>Judy</td> 
       </tr> 
       <tr> 
       <td>Judy</td> 
       </tr> 
       <tr> 
       <td>Judy</td> 
       </tr> 
       <tr> 
       <td>Judy</td> 
       </tr> 
       <tr> 
       <td>Judy</td> 
       </tr> 
       <tr> 
       <td>Judy</td> 
       </tr> 
       <tr> 
       <td>Judy</td> 
       </tr> 
       <tr> 
       <td>Judy</td> 
       </tr> 
      </tbody> 
      </table> 
     </div> 
     </body> 

    </html>

來源

2017-05-15 Raduken

您可以添加此風格：

.table-scroll tbody > tr { 
    display: table; 
    width: 100%; 
}

這裏是一個更新的fiddle

爲什麼你tbody必須display: block？你打破了桌面佈局，你會得到這樣的奇怪行爲。

來源

2017-05-15 15:38:47 zgood

只需設置「TR」爲「顯示：塊」也和它應該工作

tr, td { 
    display: block; 
}

來源

2017-05-15 15:41:25 Vashnak

這將工作，直到添加了更多的'td'細胞。在這一點上，爲什麼甚至使用'table'？這只是額外的標記，沒有任何好處。 – zgood

我完全同意 – Vashnak

回答

相關問題