跨栏[HTML]

Question

我正在开发一款带有Cordova的混合应用程序。在我的index.html中，我有以下代码：

<div class="container">
<table style="width:100%;height:100%;border-spacing:3px;border-collapse: separate;">
    <tr style="height:15%;width:100%">
        <td style="width:33%">
            <button class="btn btn-default" style="width:100%" type="button">OK</button>
        </td>
        &nbsp;
        <td style="width:33%">
            <button class="btn btn-default" style="width:100%" type="button">OK</button>
        </td>
        &nbsp;
        <td style="width:33%" colspan="3">
            <button class="btn btn-default" style="width:100%" type="button">OK</button>
        </td>
    </tr>
    <tr style="height:15%;width:100%">
        <td style="width:25%">
            <button class="btn btn-default"style="width:100%" type="button">OK</button>
        </td>
        <td style="width:25%">
            <button class="btn btn-default" style="width:100%"type="button">OK</button>
        </td>
        <td>
            <button class="btn btn-default" style="width:100%"type="button">OK</button>
        </td>

        <td>
            <button class="btn btn-default" style="width:100%"type="button">OK</button>
        </td>
    </tr>
</table>

不要关心Bootstrap的事情，主要是第二个<td>中的<tr>标签。

Answer 1

将您的1：st tr的最后td更改为<td style="width:33%" colspan="2">，并且两行的宽度相等。

<div class="container">
  <table style="width:100%;height:100%;border-spacing:3px;border-collapse: separate;">
  
    <tr style="height:15%;width:100%">
      <td style="width:33%">
        <button class="btn btn-default" style="width:100%" type="button">OK</button>
      </td>
      <td style="width:33%">
        <button class="btn btn-default" style="width:100%" type="button">OK</button>
      </td>
      <td style="width:33%" colspan="2">
        <button class="btn btn-default" style="width:100%" type="button">OK</button>
      </td>
    </tr>
    
    <tr style="height:15%;width:100%">
      <td style="width:25%">
        <button class="btn btn-default" style="width:100%" type="button">OK</button>
      </td>
      <td style="width:25%">
        <button class="btn btn-default" style="width:100%" type="button">OK</button>
      </td>
      <td>
        <button class="btn btn-default" style="width:100%" type="button">OK</button>
      </td>
      <td>
        <button class="btn btn-default" style="width:100%" type="button">OK</button>
      </td>
    </tr>
  </table>
</div>

Answer 2

没关系，这就是我想要的。我想通了:)

＆＃13;

＆＃13;

<div class="container">
    <table style="width:100%;height:100%;border-spacing:3px;border-collapse: separate;">
        <tr style="height:15%;width:100%">
            <td style="width:33%">
                <button class="btn btn-default" style="width:100%" type="button">OK</button>
            </td>
            <td style="width:33%">
                <button class="btn btn-default" style="width:100%" type="button">OK</button>
            </td>
            <td style="width:33%" >
                <button class="btn btn-default" style="width:100%" type="button">OK</button>
            </td>
        </tr>
    </table>
    <table style="width:100%">
        <tr style="height:15%;width:100%">
            <td style="width:25%">
                <button class="btn btn-default" style="width:100%" type="button">OK</button>
            </td>
            <td style="width:25%">
                <button class="btn btn-default" style="width:100%" type="button">OK</button>
            </td>
            <td style="width:25%">
                <button class="btn btn-default" style="width:100%" type="button">OK</button>
            </td>

            <td style="width:25%">
                <button class="btn btn-default" style="width:100%" type="button">OK</button>
            </td>
        </tr>
    </table>
</div>

＆＃13;

＆＃13;

＆＃13;