HTML rowspan跳過單元格

Question

爲什麼下面的HTML代碼不能生成我期望的表格？

我的一些細胞正在被跳過。我想要下表（https://jsfiddle.net/t4q801s7/1/）。唯一的區別是我想使用rowspan（例如Johnny和San Diego不會重複）。

<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

表細胞具有vertical-align:middle在默認情況下，所以如果你不想那些，你將不得不改變，在樣式表。
（出於某種深不可測的原因，我們似乎需要!important這裏。對不起。）

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>

的問題，但是，正如你所看到的，是用高度的表格單元格三行中，行之間沒有連續的行。表格單元格內沒有邊框，表格行不能有自己的邊框！所以你將不得不考慮一個解決方法。再次，對不起。