1
他のすべてのテーブルは、私が望むように、ウィンドウの全幅を占めるように見えます。なぜこの1つではないのか分かりません。 htmlは他のテーブルと同じようです。私はエラーが要素内で発生していると思うが、それを見て、それは正しく設定されているようだ。以下のコードは、スクリーンショットのページの最初の表のコードです。 Screenshot of tableHTMLテーブルがウィンドウの全幅を占めていない
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
</nav>
<div class="container">
<div class="row">
<ul class="nav nav-tabs nav-justified" id="auth-tabs" role="tablist">
<li class="nav-item"><a href="#users" id="active" class="nav-link users" role="tab" aria-controls="users" aria-selected="True" data-toggle="tab">
Users</a></li>
<li class="nav-item"><a href="#groups" id="" class="nav-link groups" role="tab" aria-controls="groups" aria-selected="false" data-toggle="tab">
Groups</a></li>
<li class="nav-item"><a href="#scopes" id="" class="nav-link scopes" role="tab" aria-controls="scopes" aria-selected="False" data-toggle="tab">
Scopes</a></li>
<li class="nav-item"><a href="#navigation" id="" class="nav-link navigation active" role="tab" aria-controls="navigation" aria-selected="true" data-toggle="tab">
Navigation</a></li>
<li class="nav-item"><a href="#pages" id="" class="nav-link pages" role="tab" aria-controls="pages" aria-selected="False" data-toggle="tab">
Pages</a></li>
<li class="nav-item"><a href="#permissions" id="" class="nav-link permissions" role="tab" aria-controls="permissions" aria-selected="False" data-toggle="tab">
Permissions</a></li>
</ul>
</div>
<div class="tab-content" id="auth-tabs">
<div id="users" class="tab-pane fade" role="tabpanel" aria-labeledby="users">
<div class='row'>
<div class="col-md-12">
<h4>Authentication
<small>Navbar</small>
<button class="btn btn-sm btn-primary pull-right" onclick="app.auth.navigation.new_nav()">
<i class="fa fa-plus">
</i>
Add to Navbar
</button>
</h4>
<hr>
<div class="row">
<table class="table Navbar" id="navbar-table" width="100%">
<thead>
<tr>
<th></th>
<th>Id</th>
<th>Page id</th>
<th>Name</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr id="Navbar-7">
<td><button class="btn btn-link table-btn" onclick="app.auth.navigation.form({"primary_key": 7})">
Edit
</button><button class="btn btn-link table-btn" onclick="app.auth.navigation.confirm_delete({"name": "srjys", "primary_key": 7})">
Delete
</button>
</td>
<td>7</td>
<td>8</td>
<td>srjys</td>
<td>il;t7;t</td>
</tr>
<tr id="Navbar-2">
<td><button class="btn btn-link table-btn" onclick="app.auth.navigation.form({"primary_key": 2})">
Edit
</button><button class="btn btn-link table-btn" onclick="app.auth.navigation.confirm_delete({"name": "Jtyed", "primary_key": 2})">
Delete
</button>
</td>
<td>2</td>
<td>8</td>
<td>Jtyed</td>
<td>agrfds</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
body {
background-color: #F5F5F5;
}
.account-wall {
margin-top: 75px;
padding: 20px 20px 20px 20px;
padding-top: 20px;
background-color: #fff;
-moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
}
.form-control {
width: 100%;
height: 34px;
padding: 6px 12px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.form-signin {
max-width: 330px;
padding: 0;
}
.buttons {
padding-top: 10px;
}
.form-group {
margin-bottom: 0;
}
.form-signin input[type="text"],
.form-signin input[type="password"],
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
font-size: 14px;
}
.small-link {
font-size: 14;
}
.margin-top {
margin-top: 20px;
}
.bounds-label {
padding-right: 0;
}
.bounds {
padding-left: 0;
padding-right: 0;
}
.table-btn {
padding-top: 0px;
padding-bottom: 0px;
}
スタイルはどこですか？ – panther
ようこそStackOverflowへ！テーブルはそのコードで全幅を占める必要があります。あなたは既存のCSSも提供していただけますか？私たちはそれなしであなたの問題を再現することはできません。あなたの質問を更新して** CSS **を表示し、[**最小で、完全で、検証可能な例**]（http://stackoverflow.com/help/mcve）を形成してください。詳細については、[**よくある質問をどうやるか**]（http://stackoverflow.com/help/how-to-ask）に関するヘルプ記事を参照して、サイトの[**ツアー**]（http://stackoverflow.com/tour）:) –
ちょうど考え：あなたは行の中に行を持っているつもりでしたか？テーブルは親の幅の100％を占めていますが、親はネストされた行であり、元の行ではなく、列/グリッドクラスのあるdivでもありません。 –