jQuery Mobile和colspan

Question

我正在使用Jquery Mobile创建一个简单的表：

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
  </div>

  <div data-role="main" class="ui-content">
    <table data-role="table" class="ui-responsive ui-shadow table-stroke ui-table ui-table-reflow">
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th>
            H1
          </th>
          <th>
            H2
          </th>
          <th>
            H3
          </th>
          <th>
            H4
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>A</td>
          <td>1A</td>
          <td>2A</td>
          <td>3A</td>
          <td>4A</td>
        </tr>
        <tr>
          <td>B</td>
          <td>1B</td>
          <td>2B</td>
          <td>3B</td>
          <td>4B</td>
        </tr>
        <tr>
          <td colspan="3">C
          </td>
          <td colspan="2">1C</td>
        </tr>
      </tbody>
    </table>
  </div>
</div> 

问题出在最后一行。 通过colspan加入3 + 2列后，当我尝试在移动设备上查看结果时，将出现“ H1”标题。

有没有办法将其隐藏在手机中？

提前致谢