Question

我遇到了bootstrap v4.1表 - flexbox的问题，我正在尝试对齐我的两个表行，一行包含<th>，另一行包含<td>，但我可以＆＃39完全成功。

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;
}

Answer 1

<style>
th,td{
    text-align:center;
}

</style>

如何在bootstrap v4.1表中将表格元素与td元素对齐？

1 个答案: