0

I have a table whose body is scrollable. But problem with me is, it's tr element is not taking full width of table. Here's my mark up

 <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>
Rasmita Dash
  • 917
  • 5
  • 15
  • 28

1 Answers1

3

You can see the below fiddle link for your question, i have tried it in fiddle and make the tr element full width to the table width.

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

your tr is not full width because by default it takes the display: table-row; so we require to make that display: table;

Chidi Mohsinali
  • 131
  • 3