带引导网格的嵌套HTML表

时间：2016-08-02 17:40:23

标签： html twitter-bootstrap twitter-bootstrap-3

我有以下plunker代码：https://plnkr.co/edit/SKEFmvY3yG0eXPcC7oKu?p=preview

我正在尝试创建一个看起来像这样的表格（注意底部边界截止但它应该在那里！）：following

最终目标是使用angular指令重新创建嵌套结构（或类似的东西）。当前代码存在表边界问题，表格看起来并没有正确连接（它应该如上图所示）。

这是我的html代码：          

<head>
  <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
  <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
  <script data-require="bootstrap@3.3.5" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script data-require="angularjs@1.5.7" data-semver="1.5.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>

  <div class="container">
    <table class="table">
      <tr>
        <td class="col-md-12">
          <table class="table table-bordered table-hover">
            <tbody>
              <tr>
                <th colspan="1">
                  Name: Logic Response
                </th>
                <tr>
                  <td class="field-label col-md-6 active">
                    <label> Action: </label>
                    <label> action.logic </label>
                  </td>
                </tr>
                <tr>
                  <td width="100%" class="col-md-12" colspan="1">
                    <table class="table table-bordered">
                      <tbody>
                        <tr>
                          <th class="col-md-6">
                            Key
                          </th>
                          <th class="col-md-6">
                            Value
                          </th>
                        </tr>
                        <tr>
                          <td class="col-md-6">
                            repetition.count
                          </td>
                          <td class="col-md-6">
                            1
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
            </tbody>
          </table>
        </td>
        </tr>

        <tr>
          <td class="col-md-12">
            <table class="table table-bordered table-hover">
              <tbody>
                <tr>
                  <th colspan="1">
                    Name: Logic Response
                  </th>
                  <tr>
                    <td class="field-label col-md-6 active">
                      <label> Action: </label>
                      <label> action.logic </label>
                    </td>
                  </tr>
                  <tr>
                    <td class="col-md-12" colspan="1">
                      <table width="100%" class="table table-bordered">
                        <tbody>
                          <tr>
                            <th class="col-md-6">
                              Key
                            </th>
                            <th class="col-md-6">
                              Value
                            </th>
                          </tr>
                          <tr>
                            <td class="col-md-6">
                              repetition.count
                            </td>
                            <td class="col-md-6">
                              1
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
              </tbody>
            </table>

          </td>
          </tr>
    </table>

  </div>
</body>

</html>

1 个答案:

答案 0 :(得分：0)

我最终在这里提出了我自己的解决方案：https://plnkr.co/edit/J2sdqgTxL4beneAOXMR1?p=preview

基本上，我没有嵌套表格，而是添加了style="margin-bottom:0;"值，并创建了多个表格以提供单个表格的外观。

代码在这里：

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
  <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
  <script data-require="bootstrap@3.3.5" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script data-require="angularjs@1.5.7" data-semver="1.5.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>


  <div class="container">
    <table class="table table-bordered table-hover" style="margin-bottom:0;">
      <tbody>
        <tr>
          <th colspan="1">
            Name: Logic Response
          </th>
          <tr>
            <td class="field-label col-md-6 active">
              <label> Action: </label>
              <label> action.logic </label>
            </td>
          </tr>
          <tr>
            <td width="100%" class="col-md-12" colspan="1">
              <table class="table table-bordered">
                <tbody>
                  <tr>
                    <th class="col-md-6">
                      Ayy
                    </th>
                    <th class="col-md-6">
                      Value
                    </th>
                  </tr>
                  <tr>
                    <td class="col-md-6">
                      repetition.count
                    </td>
                    <td class="col-md-6">
                      1
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
      </tbody>
    </table>
    <table class="table table-bordered table-hover margin-bottom:0;">
      <tbody>
        <tr>
          <th colspan="1">
            Name: Logic Response
          </th>
          <tr>
            <td class="field-label col-md-6 active">
              <label> Action: </label>
              <label> action.logic </label>
            </td>
          </tr>
          <tr>
            <td width="100%" class="col-md-12" colspan="1">
              <table class="table table-bordered">
                <tbody>
                  <tr>
                    <th class="col-md-6">
                      Ayy
                    </th>
                    <th class="col-md-6">
                      Value
                    </th>
                  </tr>
                  <tr>
                    <td class="col-md-6">
                      repetition.count
                    </td>
                    <td class="col-md-6">
                      1
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
      </tbody>
    </table>

  </div>
</body>

</html>
相关问题
最新问题