HTML rowspan skipping over cells - html

Question

Why is the following HTML code not producing the table I would expect?
Some of my cells are being skipped over. I want the following table (https://jsfiddle.net/t4q801s7/1/). The only difference being I want to use rowspan (e.g. Johnny and San Diego won't be repeated).
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Johnny</td>
<td>Bay Area</td>
</tr>
<tr>
<td>New York</td>
</tr>
<tr>
<td rowspan="2">San Diego</td>
</tr>
<tr>
<td>Zack</td>
</tr>
</tbody>
</table>

Answer 1

Table cells have vertical-align:middle by default, so if you don't want that, you will have to change that in the stylesheet.
(For some unfathomable reason, we seem to need !important here. Sorry.)
table, td, th {
vertical-align: baseline !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Johnny</td>
<td>Bay Area</td>
</tr>
<tr>
<td>New York</td>
</tr>
<tr>
<td rowspan="2">San Diego</td>
</tr>
<tr>
<td>Zack</td>
</tr>
</tbody>
</table>
The problem, however, as you can see, is that with a table cell with a height of three rows, it doesn't have the contiguous lines between the rows. Table cells don't have borders inside of them, and table rows can't have borders of their own! So you will have to think about a workaround for that. Again, sorry.