HTML/PHP 时序表时髦布局答案

【问题标题】：HTML/PHP timings table funky layoutHTML/PHP 时序表时髦布局
【发布时间】：2017-07-20 00:57:39
【问题描述】：

我想动态创建一个公司的开闭时间表，但布局看起来很糟糕，因为每行之间的间隙太大，这是它的截图：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>

【问题讨论】：

标签： php html css bootstrap-4

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

感谢您的帮助，您的代码运行良好，但迈克的代码正是我想要的。欣赏，尊重！