嵌套HTML表格

我有以下plunker代碼：https://plnkr.co/edit/SKEFmvY3yG0eXPcC7oKu?p=preview 嵌套HTML表格

我試圖創建一個表，看起來像這樣（請注意下邊框截止，但它應該有！）：

最終目標將是使用角度指令重新創建嵌套結構（或類似的東西）。當前的代碼存在表格邊界問題，表格看起來並不正確（它應該看起來像上圖）。

這是HTML代碼，我有：

<head> 
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" /> 
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> 
    <script data-require="[email protected]" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <script data-require="[email protected]" 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>

來源

2016-08-02 Zee

我在這裏結束了未來與自己的解決方案：https://plnkr.co/edit/J2sdqgTxL4beneAOXMR1?p=preview

基本上，而不是嵌套表我最終加入了style="margin-bottom:0;"值，並創建了多個表以賦予單個表的外觀。

的代碼是在這裏：

<!DOCTYPE html> 
<html> 

<head> 
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" /> 
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> 
    <script data-require="[email protected]" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <script data-require="[email protected]" 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>

來源

2016-08-02 18:16:57 Zee

回答

相關問題