укладка элементов, отображаемых между строками в таблице HTML-самозагрузке

Question

У меня есть таблица начальной загрузки, который имеет пары строк выглядеть следующим образом:

Существует кнопка генерируется в конце первой строки , Есть ли способ сделать так, чтобы его МЕЖДУ двумя рядами (т. Е. Сидели на линии, разделяющей две строки), вместо того, чтобы быть только в первой строке? Я использую таблицу классов таблицы Boostrap, поэтому стиль автоматически применяется.

таблица генерируется с помощью PHP скрипт, вот фрагмент кода:

   $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

Вы можете использовать интервал строк, чтобы это произошло :)

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