bootstrap4 row height needs to be smaller

For some reason I can’t make my table rows size small/thin, why can’t I just … Read more bootstrap4 row height needs to be smaller

For some reason I can’t make my table rows size small/thin, why can’t I just set the max-height?

I want it to have no space at the top and bottom for every row, maybe only 1-2px, but how?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<table class="table table-bordered table-hover">
   <thead class="thead-dark" id="TableTitle">
      <tr>
         <th id="Testplans" style="width:30%;" scope="col">Testplans for <?php echo $ProjectsList;?></th>
         <th id="PF" style="width: 200px;" scope="col">Status</th>
         <th id="Date" style="width: 250px;" scope="col">Date</th>
         <th id="Version" scope="col">Version</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td class='font-weight-bold' scope='row' id=".$testPlanData['TestJobId'].">
            <a target='_blank' href='TestResults?ID=".$testPlanData['TestJobId']."'>
            Test
            </a>                
         </td>
         <td id=".$testPlanData['TestJobId'].">
            <div class='ml-1 d-flex'>
               <div title='Not applicable'>
                  <button onclick='toggleHideShowTC(this.id)' id='na-".$testPlanData['TestJobId']."' style='white-space: nowrap;' title='Passed' class='btn btn-dark rounded text-light font-weight-bold h6 p-1 d-inline-block'>
                  234 N/A
                  </button>
               </div>                   
            </div>
            <br>
            <div class='d-flex justify-content-start'></div>
         </td>
         <td id=".$testPlanData['TestJobId']."><small class='text-muted'>12:13:1322</small></td>
         <td id=".$testPlanData['TestJobId'].">
            <small class='text-muted'> 123 </small>           
         </td>
      </tr>
   </tbody>
</table>

So more like this:

enter image description here

Source: CSS – Stack Overflow


Categories: NewsTags: , ,

Tags: , ,


Leave a Reply

Your email address will not be published. Required fields are marked *