2016-08-02 17 views
0

I次plunkerコードがあります:https://plnkr.co/edit/SKEFmvY3yG0eXPcC7oKu?p=previewネストされたHTMLテーブル

私はこのようになりますテーブルを作成しようとしています(下の境界線のカットオフを注意するが、それはあるはず!):following

最終目標は、角度指令を使用して入れ子構造(または同様のもの)を再作成することです。現在のコードでは、テーブルの境界に問題があり、テーブルが正しく結合されているように見えません(上の図のようになります)。

これは私が持っているhtmlコードです:むしろ、私はstyle="margin-bottom:0;"を追加することになったテーブルを入れ子にするよりも、基本的にhttps://plnkr.co/edit/J2sdqgTxL4beneAOXMR1?p=preview

:私はここに私自身の解決策を考え出すことになった

<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="an[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> 

答えて

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> 
関連する問題