可滾動表體

Question

我有一個表格，它的主體是可滾動的。但是我的問題是，這是tr元素沒有佔用表格的全部寬度。這裏是我的標記

<table style="border-radius: 10px; border: 1px solid grey; text-align: center;"> 
     <thead style="display: block;"> 
      <tr> 
       <td style = "width:10%;"><input id="chkSelectAllSubs" type="checkbox"></td> 
       <td style = "width:40%;">Subscriber ID</td> 
       <td style="width:50%">Subscriber Name</td> 
      </tr> 
    </thead> 
    <tbody style="display: block; max-height: 300px; overflow-y: scroll" width="100%"> 
      <tr> 
       <td style = "width:10%;"><input id="chk_13450" type="checkbox"></td> 
       <td style = "width:40%;">13450</td> 
       <td style = "width:50%;">GREEN JOE</td> 
      </tr> 
      <tr> 
       <td style = "width:10%;"><input id="chk_44109" type="checkbox"></td> 
       <td style = "width:40%;">44109</td> 
       <td style = "width:50%;">John26 Smith26</td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

你可以看到下面的小提琴鏈接，你的問題，我已經在撥弄嘗試過了，讓tr元素全寬表寬度。

http://jsfiddle.net/cesb8n4j/1/

您的TR不完整的寬度，因爲默認情況下，它需要的display: table-row;所以我們需要做的是display: table;