0
I次plunkerコードがあります:https://plnkr.co/edit/SKEFmvY3yG0eXPcC7oKu?p=previewネストされたHTMLテーブル
私はこのようになりますテーブルを作成しようとしています(下の境界線のカットオフを注意するが、それはあるはず!):
最終目標は、角度指令を使用して入れ子構造(または同様のもの)を再作成することです。現在のコードでは、テーブルの境界に問題があり、テーブルが正しく結合されているように見えません(上の図のようになります)。
これは私が持っている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>