Reputation: 738

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:

EDIT 12px padding?

Upvotes: 0

Answers (2)

floreapaun

Reputation: 124

You can easily overwrite Bootstrap styles. I've changed the default .75rem padding to 0px. Also middle vertical aligning looks better to me. Check the style element.

<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>
<style>
.table td, .table th {
    padding: 0px;
    vertical-align: middle;
}
</style>
<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>
      <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>
      <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>

Upvotes: 0

slow

Reputation: 1418

The space appears, because inside your

<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>

you have these two lines

<br>
<div class='d-flex justify-content-start'></div>

Remove them and it looks much better. Also you could remove the margin-bottom from your .btn class.

Upvotes: 2

bootstrap4 row height needs to be smaller

Answers (2)

Related Questions