HTML/PHP計時錶時髦的佈局

Question

我想創建一個動態compnay的開幕式和閉幕式時間表，但佈局看起來非常糟糕，因爲它在每一行之間有太多的空白，這是一個屏幕截圖：Screenshot

任何人都可以幫我解釋爲什麼這是由於導致或我應該把php代碼放在正確的位置。 在此先感謝

<div class="container about-timings wow fadeInUp"> 
     <div class="row"> 
     <div class="col-md-12"> 
      <?php 

include("admin/db/db.php"); 



$select_db = "select * from timings"; 

$run_events = mysql_query($select_db); 

while($row=mysql_fetch_array($run_events)){ 


    $id = $row['id']; 
    $day = $row['day']; 
    $open = $row['open']; 
    $close = $row['close']; 


?> 
      <table class="table table-bordered"> 



         <td><?php echo $day; ?></td> 
         <td><?php echo $open; ?></td> 
         <td><?php echo $close; ?></td> 

<?php }?> 

      </table> 
     </div> 
     </div> 
    </div> 
    </section> 

Answer 1

<table class="table table-bordered"> 
<?php 
while($row=mysql_fetch_array($run_events)){ 
    $id = $row['id']; 
    $day = $row['day']; 
    $open = $row['open']; 
    $close = $row['close']; 
    echo' <tr> 
       <td>'. $day .'</td> 
       <td>'. $open.'</td> 
       <td>'.$close.'</td> 
      </tr>'; 
}?> 
</table> 

Answer 2

我會用flex代替，並設置柔性物品flex-grow: 1或flex: 1 0 0的簡稱。

.flex { 
 
    display: flex; 
 
    border: solid #aaa; 
 
    border-width: 1px 1px 0; 
 
} 
 
.flex:last-child { 
 
    border-bottom: 1px solid #aaa; 
 
} 
 
.flex > div { 
 
    flex: 1 0 0; 
 
    padding: .5em; 
 
} 
 
.flex > div + div { 
 
    border-left: 1px solid #aaa; 
 
}

<div class="container about-timings wow fadeInUp"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 

 
<?php 
 

 
include("admin/db/db.php"); 
 

 
$select_db = "select * from timings"; 
 

 
$run_events = mysql_query($select_db); 
 

 
while($row=mysql_fetch_array($run_events)){ 
 

 
    $id = $row['id']; 
 
    $day = $row['day']; 
 
    $open = $row['open']; 
 
    $close = $row['close']; 
 
?> 
 
     <div class="flex"> 
 
     <div>Monday - this is where you put php <?php echo $day; ?></div> 
 
     <div>1:00 - this is where you put php <?php echo $open; ?></div> 
 
     <div>2:00 - this is where you put php <?php echo $close; ?></div> 
 
     </div> 
 
     <!-- some additional sample output --> 
 
     <div class="flex"> 
 
     <div>Tuesday</div> 
 
     <div>1:00</div> 
 
     <div>12:00</div> 
 
     </div> 
 
     <div class="flex"> 
 
     <div>Wednesday</div> 
 
     <div>1:00</div> 
 
     <div>12:00</div> 
 
     </div> 
 
     <!-- end sample output --> 
 
     <?php }?> 
 
    </div> 
 
    </div> 
 
</div>