样式元素出现在 HTML bootstrap table 中的行之间

Question

我有一个 bootstrap table，其中成对的行如下所示：

第一行末尾生成了一个按钮。有没有办法让它出现在两行之间（即坐在分隔两行的线上）而不是只在第一行？我正在使用 Boostrap table class 'table' 所以样式会自动应用。

table 是通过 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>

样式元素出现在 HTML bootstrap table 中的行之间

Styling elements to appear between rows in a HTML bootstrap table

html

html-table

rows

twitter-bootstrap