Question

为什么以下HTML代码没有产生我期望的表？

我的一些细胞被跳过了。我想要下表（https://jsfiddle.net/t4q801s7/1/）。唯一的区别是我想使用rowspan（例如Johnny和San Diego不会被重复）。

＆＃13;

<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>

＆＃13;

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>

然而，正如您所看到的那样，问题是对于高度为三行的表格单元格，它们之间没有连续的行。表格单元格内部没有边框，表格行不能有自己的边框！所以你必须考虑一个解决方法。再次，抱歉。

HTML rowspan跳过单元格

1 个答案: