resize table columns to fit width-CodePudding

I have a JHipster table into which I want to add vertical scroll. I tried this:

<div  style="max-height: 800px;">
   <table >
      <thead style="display:table; width: 100%; table-layout: fixed;">
         <tr>
            <th>ID</th>
            <th >
               Pair                    
            </th>
            <th >
              Level 
            </th>
            <th >
               Spread                     
            </th>
         </tr>
      </thead>
      <tbody style="display:block; max-height: 300px; width: 100%; overflow-y: scroll;">             
         <tr data-cy="entityTable">
            <td>267</td>
            <td>test</td>
            <td>silver</td>
            <td>6</td>
         </tr>
         <tr data-cy="entityTable">
            <td>268</td>
            <td>test</td>
            <td>gold</td>
            <td>6</td>
         </tr>
      </tbody>
   </table>
</div>

I want to have scroll only for table rows, not for head. I tried to implement this using display:block; but the rows are too shrinked. Is it possible to resize the table rows to fill the entire width? Any idea how I can solve this?

CodePudding user response：

<div  style="max-height: 800px;">
   <table  style="display:table; width: 100%; table-layout: fixed;">
      <thead>
         <tr>
            <th>ID</th>
            <th >
               Pair                    
            </th>
            <th >
              Level 
            </th>
            <th >
               Spread                     
            </th>
         </tr>
      </thead>
      <tbody>             
         <tr data-cy="entityTable">
            <td>267</td>
            <td>test</td>
            <td>silver</td>
            <td>6</td>
         </tr>
         <tr data-cy="entityTable">
            <td>268</td>
            <td>test</td>
            <td>gold</td>
            <td>6</td>
         </tr>
      </tbody>
   </table>
</div>

CodePudding user response：

I slightly edited your code stripping of the styles from the html and setting up a set of css rules.

I added some rows to better show the behaviour of the vertical scrollbar.

table, thead and tr: they all use display: table;
tbody has instead display: block; and overflow: auto to show scrollbars on table contents
the table cells size are obtained with table-layout: fixed

table tbody{
  display: block;
  height: 150px;
  overflow: auto;
}

table, tr td {
    border: solid 1px lightgray;
}

thead, tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

<div >
   <table >
      <thead >
         <tr>
            <th>ID</th>
            <th >
               Pair                    
            </th>
            <th >
              Level 
            </th>
            <th >
               Spread                     
            </th>
         </tr>
      </thead>
      <tbody >             
         <tr data-cy="entityTable">
            <td>267</td>
            <td>test</td>
            <td>silver</td>
            <td>6</td>
         </tr>
         <tr data-cy="entityTable">
            <td>268</td>
            <td>test</td>
            <td>gold</td>
            <td>6</td>
         </tr>
         
         <tr data-cy="entityTable">
            <td>268</td>
            <td>test</td>
            <td>gold</td>
            <td>6</td>
         </tr>
         <tr data-cy="entityTable">
            <td>268</td>
            <td>test</td>
            <td>gold</td>
            <td>6</td>
         </tr>
         <tr data-cy="entityTable">
            <td>268</td>
            <td>test</td>
            <td>gold</td>
            <td>6</td>
         </tr>
         <tr data-cy="entityTable">
            <td>268</td>
            <td>test</td>
            <td>gold</td>
            <td>6</td>
         </tr>
         <tr data-cy="entityTable">
            <td>268</td>
            <td>test</td>
            <td>gold</td>
            <td>6</td>
         </tr>
         <tr data-cy="entityTable">
            <td>268</td>
            <td>test</td>
            <td>gold</td>
            <td>6</td>
         </tr>
      </tbody>
   </table>
</div>