Styling elements to appear between rows in a HTML bootstrap table

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;

@NikhilBatra Can you elaborate please? Answer and I will accept if works — blueprintchris, May 12 '16 at 10:25
You can create a fiddle or read about position: absolute, I cannot create entire HTML and css from scratch. — Nikhil Batra, May 12 '16 at 10:26
"The table is generated via PHP script" — You're asking about HTML, not PHP. It would be more useful to show a plain HTML reduced test case. — Quentin, May 12 '16 at 10:30
@blueprintChris — You are trying to provide code so that other people can help you with it. The less work they have to do to test your code, the more likely they are to help you. — Quentin, May 12 '16 at 10:36
True, however @Bojan Petkovski helped me below, no complaints, and his answer worked. I pasted it like it was because I didn't think the solution would be anything complicated and voila - it wasn't. If it was a more complicated ask then I would have made a test-case — blueprintchris, May 12 '16 at 10:38

Bojan Petkovski · Accepted Answer · 2016-05-12T10:38:47.560

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>

This worked! Thanks! I needed the `rowspan="2"` and `{vertical-align:middle}` P.S. I appreciate the edit ;) — blueprintchris, May 12 '16 at 10:39

Styling elements to appear between rows in a HTML bootstrap table

1 Answers1