个人中心
gpt4 book ai didi

html - 如何将 table th 元素与 bootstrap v4.1 表中的 td 元素对齐？

转载 作者：行者123 更新时间：2023-11-28 01:48:15 25 4
gpt4 key购买 nike

我在使用 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/

25 4 0
文章推荐： c++ - 在 Eigen 源中的哪个位置是为特定矩阵定义的 sum() 函数？
文章推荐： html - 具有适当滚动行为的绝对定位的布局行为
文章推荐： css - 在元素中使用本 map 标 svg
文章推荐： c++ - 在我的模板类示例中，即使我没有定义 add 方法，它也会添加 take "segmentation fault (core dumped)"错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com