html - HTML5在同一行的两列上使用Rowspan

我正在尝试创建一个表，其中第1行的单元格1和单元格2都跨越了2行，以便在它们各自独立的单元格中获得更大的标题。像这样的代码

<table border="1">
  <tr height="50px">
    <!--first row-->
    <th>Quarter</th>
    <!--first column in first row-->
    <th>Total Sales</th>
    <!--first row, second column-->
  </tr>
  <tr>
    <!--second row-->
    <td>Q1</td>
    <td>$5,349</td>
  </tr>
  <tr>
    <!--third row--access from http://cbsnews.com-->
    <td>Q2</td>
    <td>$8,349</td>
  </tr>
  <tr>
    <!--Fourth row-->
    <td>Q3</td>
    <td>$22,349</td>
  </tr>
</table>

但是我不想让表的行高为50，让它看起来只跨两行，而是想让代码看起来更像

<table border="1">
  <tr>
    <!--first row-->
    <th rowspan="2">Quarter</th>
    <!--first column in first row-->
    <th rowspawn="2">Total Sales</th>
    <!--first row, second column-->
  </tr>
  <tr>
    <!--second row-->
    <td>Q1</td>
    <td>$5,349</td>
  </tr>
  <tr>
    <!--third row--access from http://cbsnews.com-->
    <td>Q2</td>
    <td>$8,349</td>
  </tr>
  <tr>
    <!--Fourth row-->
    <td>Q3</td>
    <td>$22,349</td>
  </tr>
</table>

但这会产生一个奇怪的表。
有办法做到这一点吗？还是我必须适应行高？

最佳答案

只需将tr {height: 50px;}添加到css并删除rowspan属性。
我想这就是你想要的：http://jsfiddle.net/bfddopzt/1/

关于html - HTML5在同一行的两列上使用Rowspan，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32366046/