我在使用 bootstrap v4.1 表格时遇到问题 - flexbox，我正在尝试对齐我的两个表格行，其中一个包含 <th>和其他包含<td> ，但我就是做不到。
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="css/bootstrap-4.1.0-dist/css/bootstrap.css">
<link rel="stylesheet" href="css/admin.css">
</head>
<body ng-app="App" ng-controller="testController">
<div class="wrapper">
<h1>
HEADING
</h1>
<div class="main">
<div class="search">
<input class="form-control" type="text" ng-model="searchStudent" placeholder="Search for a certain student">
</div>
<table class="table table-hover table-dark d-flex">
<tr class="d-flex flex-row flex-fill">
<th class="d-flex flex-row flex-fill align-content-center">Username</th>
<th class="d-flex flex-row flex-fill">Password</th>
<th class="d-flex flex-row flex-fill">Email</th>
<th class="d-flex flex-row flex-fill">JMBG</th>
<th class="d-flex flex-row flex-fill">Fullname</th>
<th class="d-flex flex-row flex-fill">Index</th>
<th class="d-flex flex-row flex-fill">Address</th>
<th class="d-flex flex-row flex-fill">Option</th>
</tr>
<tr class="d-flex flex-row flex-fill" ng-repeat="student in list | filter: searchStudent">
<input type="hidden" ng-value="student.student_id" id="student_id" ng-model="student.student_id">
<td class="d-flex flex-row flex-fill"><input class="form-control" type="text" ng-value="student.username" id="username" ng-model="student.username"></td>
<td class="d-flex flex-row flex-fill"><input class="form-control" type="text" ng-value="student.password" id="password" ng-model="student.password" ></td>
<td class="d-flex flex-row flex-fill"><input class="form-control" type="text" ng-value="student.email" id="email" ng-model="student.email"></td>
<td class="d-flex flex-row flex-fill"><input class="form-control" type="text" ng-value="student.jmbg" id="jmbg" ng-model="student.jmbg"></td>
<td class="d-flex flex-row flex-fill"><input class="form-control" type="text" ng-value="student.fullname" id="fullname" ng-model="student.fullname"></td>
<td class="d-flex flex-row flex-fill"><input class="form-control" type="text" ng-value="student.index" id="index" ng-model="student.index"></td>
<td class="d-flex flex-row flex-fill"><input class="form-control" type="text" ng-value="student.address" id="address" ng-model="student.address"></td>
<td class="d-flex flex-row flex-fill"><button class="btn btn-primary" ng-click="updateStudent(student.student_id, student.username, student.password, student.email, student.jmbg, student.fullname, student.index, student.address)">Update</button><button class="btn btn-primary" ng-click="deleteStudent(student.student_id)">Delete</button></td>
</tr>
</table>
</div>
<div class="create">
<table class="table table-hover table-dark">
<tr>
<th scope="col">Username</th>
<th scope="col">Password</th>
<th scope="col">Email</th>
<th scope="col">JMBG</th>
<th scope="col">Fullname</th>
<th scope="col">Index</th>
<th scope="col">Address</th>
<th scope="col">Option</th>
</tr>
<tr>
<td><input class="form-control" type="text" id="username_create"></td>
<td><input class="form-control" type="text" id="password_create"></td>
<td><input class="form-control" type="text" id="email_create"></td>
<td><input class="form-control" type="text" id="jmbg_create"></td>
<td><input class="form-control" type="text" id="fullname_create"></td>
<td><input class="form-control" type="text" id="index_create"></td>
<td><input class="form-control" type="text" id="address_create"></td>
<td><button class="btn btn-primary" ng-click="createStudent()">CREATE</button></td>
</tr>
</table>
</div>
<button class="btn btn-primary" type="submit" ng-click="options()">Get Options</button>
</div>
<script src="js/angular.js"></script>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/panel.js"></script>
</body>
</html>
CSS:
* {
padding: 0;
margin: 0;
}
html, body {
margin: 0 auto;
width: 1200px
}
.wrapper {
margin: auto;
display: grid;
/*grid-template: repeat(4, 1fr)/repeat(1, 1fr);*/
/*grid-gap: 2px;*/
/*grid-auto-rows: min-content;*/
grid-template-areas: "heading heading heading"
"update-student update-student update-student"
"create-student create-student create-student"
"options options options";
grid-template-rows: min-content;
}
.wrapper h1 {
align-self: center;
text-align: center;
grid-area: heading;
}
.main {
align-self: center;
grid-area: update-student;
display: grid;
grid-template-areas: "search"
"student-table";
grid-template-rows: min-content;
grid-gap: 5px;
}
.main.search {
grid-area: search;
}
.main table {
grid-area: student-table;
}
/*TABLE*/
.main table tr td button {
margin: 4px;
}
.create {
grid-area: create-student;
}
.wrapper button {
grid-area: options;
}
最佳答案
<style>
th,td{
text-align:center;
}
</style>
关于html - 如何将 table th 元素与 bootstrap v4.1 表中的 td 元素对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50088635/