How do I make table rows the same height? - css

Question

I'm doing a contact merge sort of page, and therefore need two tables side by side where you can select which data you want from each contact, but I need the rows to line up so it's easy for the user to select appropriate data. I'm using boostrap
<div class="col-sm-10 col-sm-offset-1">
<form method="post" class="form-inline">
<?php foreach($contacts as $contact): ?>
<div class="col-sm-6">
<table class="table table-bordered table-container">
<thead>
<tr>
<th colspan="3" class="text-center">Contact <?php echo $counter == 1 ? '1':'2'; ?></th>
</tr>
</thead>
<tbody>
<tr>
<div class="input-group">
<td class="td_attr">Main Type:</td>
<td class="text-center td_data"><?php echo $main_type_array[$contact->contact_main_type]; ?></td>
<td class="text-center"><input value="1" type="radio" name="main_type"></td>
</div>
</tr>
<tr>
<div class="input-group">
<td class="td_attr">Title:</td>
<td class="text-center td_data"><?php echo $contact->contact_title; ?></td>
<td class="text-center"><input value="1" type="radio" name="title"></td>
</div>
</tr>
<tr>
<div class="input-group">
<td class="td_attr">First Name:</td>
<td class="text-center td_data"><?php echo $contact->contact_fname; ?></td>
<td class="text-center"><input value="1" type="radio" name="first_name"></td>
</div>
</tr>
<tr>
<div class="input-group">
<td class="td_attr">Last Name:</td>
<td class="text-center td_data"><?php echo $contact->contact_sname; ?></td>
<td class="text-center"><input value="1" type="radio" name="last_name"></td>
</div>
</tr>
<tr>
<div class="input-group">
<td class="td_attr">Salutation:</td>
<td class="text-center td_data"><?php echo $contact->contact_salu; ?></td>
<td class="text-center"><input value="1" type="radio" name="salu"></td>
</div>
</tr>
<tr>
<div class="input-group">
<td class="td_attr">Position:</td>
<td class="text-center td_data"><?php echo $contact->contact_position; ?></td>
<td class="text-center"><input value="1" type="radio" name="position"></td>
</div>
</tr>
<tr>
<div class="input-group">
<td class="td_attr">Email Address:</td>
<td class="text-center td_data"><?php echo $contact->contact_email; ?></td>
<td class="text-center"><input value="1" type="radio" name="email"></td>
</div>
</tr>
<tr>
<div class="input-group">
<td class="td_attr">Alt. Email:</td>
<td class="text-center td_data"><?php echo $contact->contact_alt_email; ?></td>
<td class="text-center"><input value="1" type="radio" name="alt_email"></td>
</div>
</tr>
<tr>
<div class="input-group">
<td class="td_attr">Phone Number:</td>
<td class="text-center td_data"><?php echo $contact->contact_phone; ?></td>
<td class="text-center"><input value="1" type="radio" name="phone"></td>
</div>
</tr>
<tr>
<div class="input-group">
<td class="td_attr">Mobile Number:</td>
<td class="text-center td_data"><?php echo $contact->contact_mobile; ?></td>
<td class="text-center"><input value="1" type="radio" name="mobile"></td>
</div>
</tr>
<tr>
<div class="input-group">
<td class="td_attr">PA Name:</td>
<td class="text-center td_data"><?php echo $contact->contact_pa_name; ?></td>
<td class="text-center"><input value="1" type="radio" name="pa_name"></td>
</div>
</tr>
<tr>
<div class="input-group">
<td class="td_attr">PA Email:</td>
<td class="text-center td_data"><?php echo $contact->contact_pa_email; ?></td>
<td class="text-center"><input value="1" type="radio" name="pa_email"></td>
</div>
</tr>
<tr>
<div class="input-group">
<td class="td_attr">Type:</td>
<td class="text-center td_data"><?php echo $contact->old_type_new; ?></td>
<td class="text-center"><input value="1" type="radio" name="old_type_new"></td>
</div>
</tr>
<tr>
<div class="input-group">
<td class="td_attr">Interest Area 1:</td>
<td class="text-center td_data"><?php echo $contact->contact_interest_area; ?></td>
<td class="text-center"><input value="1" type="radio" name="ia1"></td>
</div>
</tr>
<tr>
<div class="input-group">
<td class="td_attr">Interest Area 2:</td>
<td class="text-center td_data"><?php echo $contact->contact_interest_area2; ?></td>
<td class="text-center"><input value="1" type="radio" name="ia2"></td>
</div>
</tr>
<tr>
<div class="input-group">
<td class="td_attr">Affilliation:</td>
<td class="text-center td_data"><?php echo $contact->contact_affiliation; ?></td>
<td class="text-center"><input value="1" type="radio" name="affiliation"></td>
</div>
</tr>
<tr>
<div class="input-group">
<td class="td_attr">Source:</td>
<td class="text-center td_data"><?php echo $contact->contact_source; ?></td>
<td class="text-center"><input value="1" type="radio" name="source"></td>
</div>
</tr>
<tr>
<div class="input-group">
<td class="td_attr">Location:</td>
<td class="text-center td_data"><?php echo $contact->contact_location; ?></td>
<td class="text-center"><input value="1" type="radio" name="location"></td>
</div>
</tr>
<tr>
<div class="input-group">
<td class="td_attr">Forum Interests:</td>
<td class="text-center td_data">
<?php
foreach($contact->forum_interests as $forum) {
echo "$forum->forum_1word <br/>";
}
?>
</td>
<td class="text-center vert-align"><input value="1" type="radio" name="forum_interests"></td>
</div>
</tr>
</tbody>
</table>
</div>
<?php $counter++; ?>
<?php endforeach; ?>
<?php for($i = 0; $i < 2; $i++): ?>
<div class="col-sm-6">
<table class="table table-bordered">
<thead>
<tr>
<th colspan="3" class="text-center">Events</th>
</tr>
<tr>
<th>Event Date</th>
<th>Event Title</th>
<th>Invite Status</th>
</tr>
</thead>
<tbody>
<?php foreach($events[$i] as $event): ?>
<tr>
<td><?php echo $event->event_date ?></td>
<td><?php echo $event->event_title; ?></td>
<Td><?php echo $contacts[$i]->invites[$event->event_id]; ?></Td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<?php endfor; ?>
</form>
</div>

Answer 1

have you tried adding a
div class="row"
to wrap your for loop?