AdminBSBMaterialDesign icon indicating copy to clipboard operation
AdminBSBMaterialDesign copied to clipboard

Table with checkbox

Open martingagne opened this issue 7 years ago • 2 comments

First of all, great job @gurayyarar on this template. It is exceptional!

I am trying to build a table with a checkbox which would allow me to select one or many rows in a table. However as soon as I add a checkbox on a row, the row expand and the text is not centered anymore.

What would be a clean way to address this? Am I missing something? Would you be able to build us an example?

Thank you!

<div class="body table-responsive">
     <table id="users-table" class="table table-striped">
         <thead>
             <tr>
                 <th></th>
                 <th>[Schedule]</th>
                 <th>[Message]</th>
                 <th>[Status]</th>
                 <th>[Post]</th>
             </tr>
         </thead>
         <tbody>
                 <tr id="row-1">
                     <th scope="row"><input id="select-1" type="checkbox" /><label for="select-1" /></th>
                     <td></td>
                     <td>dsfsdkjhkh</td>
                     <td><i class="fa fa-circle m-r-5 col-success"></i>Enabled</td>
                     <td></td>
                 </tr>
                 <tr id="row-2">
                     <th scope="row"><input id="select-2" type="checkbox" /><label for="select-2" /></th>
                     <td></td>
                     <td>owieruwoeiruowieruoiu</td>
                     <td><i class="fa fa-circle m-r-5 col-success"></i>Enabled</td>
                     <td></td>
                 </tr>
                 <tr id="row-3">
                     <th scope="row"><input id="select-3" type="checkbox" /><label for="select-3" /></th>
                     <td></td>
                     <td>rewiruweoiruoi</td>
                     <td><i class="fa fa-circle m-r-5 col-success"></i>Enabled</td>
                     <td></td>
                 </tr>
         </tbody>
     </table>
</div>

image

martingagne avatar Jul 05 '17 01:07 martingagne

Have you tried removing the table-responsive class? Or setting the max-width of the first column?

gerardbalaoro avatar Oct 10 '17 01:10 gerardbalaoro

helo do you remember how you fixed this please

micheldibsabbagh avatar Jan 17 '21 00:01 micheldibsabbagh