blueprintChris blueprintChris - 6 months ago 32
HTML Question

Styling elements to appear between rows in a HTML bootstrap table

I have a bootstrap table which has pairs of rows appear like the following:

Rows

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

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>

Comments