Styling elements to appear between rows in a HTML bootstrap table - html

Question

I have a bootstrap table which has pairs of rows appear like the following:
There is a button generated at the end of the first row. Is there way to make it appear so its BETWEEN the two rows (i.e. sat on the line that is dividing the two rows) instead of it being in the first row only? I am using the Boostrap table class 'table' so the styling is automatically applied.
The table is generated via PHP script, here is the snippet:
$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

You can use row span to make it happen :)
.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>