可滚动表体 [重复]答案

【问题标题】：Scrollable table body [duplicate]可滚动表体 [重复]
【发布时间】：2023-03-29 11:19:01
【问题描述】：

我有一个表格，它的主体是可滚动的。但我的问题是，它的 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>

【问题讨论】：

为什么是<tbody style="display: block; 和<thead style="display: block;">
我想要可滚动的表格正文
jsfiddle.net/VTNax/2
我不想改变我的可滚动表格主体的方法，我只需要我的 tr 元素占据全宽

标签： html css

【解决方案1】：

您可以查看下面的小提琴链接来解决您的问题，我已经在小提琴中尝试过，并将 tr 元素的全宽设置为表格宽度。

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

您的 tr 不是全宽，因为默认情况下它采用 display: table-row;，所以我们需要使用 display: table;

【讨论】：

谢谢..同样是问题