Styling Elemente zwischen den Reihen in einem HTML-Bootstrap Tabelle angezeigt

Question

I eine Bootstrap-Tabelle haben die Paare von Zeilen erscheinen wie folgt hat:

es einen Knopf am Ende der ersten Reihe erzeugt wird, . Gibt es einen Weg, es so erscheinen zu lassen, dass es zwischen den beiden Reihen liegt (d. H. Auf der Linie liegt, die die zwei Reihen teilt), anstatt dass es nur in der ersten Reihe ist? Ich verwende die Boostrap-Tabellenklasse 'table', damit das Styling automatisch angewendet wird.

Die Tabelle über PHP-Skript erzeugt wird, hier ist der Code-Schnipsel:

   $table = "<table class='table'>"; 
       $table .= "<thead><tr><th>Departing Station</th><th>Depart Time</th><th>Destination</th><th>Arrival Time</th><th>Route</th></tr></thead>"; 
       $table .= "<tbody>"; 

       foreach ($printable_results as $result){ 

       $journey1 = $result['journey1']['journey_id']; 
       $journey2 = $result['journey2']['journey_id']; 

       $table .= "<tr style='background-color:#F9F9F9;'> 
          <td>" . $result['journey1']['start_station'] . "</td> 
          <td>" . $result['journey1']['depart_time'] . "</td> 
          <td>" . $result['journey1']['end_station'] . "</td> 
          <td>" . $result['journey1']['arrive_time'] . "</td> 
          <td> 
          <a href='index.php?action=route_changeover&journey1_id=". $journey1 . "&journey2_id=". $journey2 . "'> 
           <input class='btn btn-success' type='submit' value='Full Route >'> 
          </a> 
          </td> 
          </tr>"; 
       $table .= "<tr style='background-color:#F9F9F9;'> 
          <td>" . $result['journey2']['start_station'] . "</td> 
          <td>" . $result['journey2']['depart_time'] . "</td> 
          <td>" . $result['journey2']['end_station'] . "</td> 
          <td>" . $result['journey2']['arrive_time'] . "</td> 
          <td></td> 
          </tr>"; 
       $table .= "<tr><td colspan='4'></td></tr>"; 

       } 

       $table .= "</tbody></table>"; 
       echo $table; 

Answer 1

Sie Zeilenspanne verwenden können, um es :)

.table>tbody>tr>td.route-wrap { 
 
    vertical-align: middle; 
 
    text-align: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<table class="table"> 
 
    <thead> 
 
    <tr> 
 
     <th>Departing Station</th> 
 
     <th>Depart Time</th> 
 
     <th>Destination</th> 
 
     <th>Arrival Time</th> 
 
     <th>Route</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Text</td> 
 
     <td>Text</td> 
 
     <td>Text</td> 
 
     <td>Text</td> 
 
     <td class="route-wrap" rowspan="2"> 
 
     <input class='btn btn-success' type='submit' value='Full Route >'> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Text</td> 
 
     <td>Text</td> 
 
     <td>Text</td> 
 
     <td>Text</td> 
 
    </tr> 
 
    </tbody> 
 
</table>