Question

我制作了一个 Web 应用程序，其中链接了一个数据库。我使用数据库来显示已在网页中注册的用户（未发布，因此都是组成数据）。我使用 datatables.net 设计我的表格，观看以下视频：https://youtu.be/s3o8iuoDMyI?list=LL
https://youtu.be/U0zYxZ6OzDM?list=LL

但是我在我的表格显示中并没有完全得到想要的结果：

现在的数据库表：

我尝试删除页面代码中的所有 padding 元素，但没有任何改变。我做错了什么？

代码：

@{
    ViewData["Title"] = "Admin Page";
    string[] TableHeaders = new string[]
    {
      "First name"
      ,"Last name"
      ,"Email"
      ,"Phone Number"
    };
    Layout = "/Views/Shared/_Layout.cshtml";
}

<style>
    body {
        display: flex;
        background: #222831;
        align-items: center;
        justify-content: center;
        height: 100vh;
        color: snow;
        margin-bottom: 60px;
        font-family: Kalam, cursive;
    }
    .table{
        background:#fff;
        overflow-y:auto;
        box-shadow:0px 10px 50px 0px rgba(0,0,0,0.5);
        border-radius:10px;
        padding: 5rem;
    }
    table{
        width:100%;
        text-align:center;
        border-collapse:collapse;
    }
    table thead th,
    table tbody td{
        padding:15px;
        border:none;
        font-weight:600;
        font-size:14px;
    }
    table thead th{
        background: #1861ac;
        color:snow;
        font-size:16px;
        position:sticky;
        top:-1%;
    }
    table tbody td {
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    nav{
        display:none !important;
    }
</style>

<div class="table">
    <table id="Users" class="table table-bordered table-hover table-sm">
        <thead>
            <tr>
                @{
                    foreach (var head in TableHeaders)
                    {
                        <th>
                            @head
                        </th>
                    }
                }
            </tr>
        </thead>
        <tbody>
            @{
                if (Model != null)
                {
                    foreach (var Acc in Model)
                    {
                        <tr>
                            <td>@Acc.Fname</td>
                            <td>@Acc.Lname</td>
                            <td>@Acc.Email</td>
                            <td>@Acc.PhoneNO</td>
                        </tr>
                    }

                }
            }

        </tbody>
    </table>
</div>

Answer 1

正如上面的评论中所说，删除我的内容部分和标题之间过高高度的属性是 border-collapse。最初是border-collapse: seperate !important，后来改为border-collapse: collapse !important；这与任何填充无关（这是我最初的想法）。无论如何，这是我的整个 style 块以供进一步参考：

<style>
    body {
        display: flex;
        background: midnightblue;
        align-items: center;
        justify-content: center;
        height: 940px;
        color: snow;
        margin-bottom: 60px;
        font-family: Kalam, cursive;
    }
    .table{
        background:#fff;
        overflow-y:auto;
        box-shadow:0px 10px 50px 0px snow;
        border-radius: 20px;
        padding: 2rem;
    }
    table{
        width:100%;
        text-align:center;
        border-collapse:collapse;
    }
    table thead th,
    table tbody td{
        padding:15px;
        border:none;
        font-weight:600;
        font-size:14px;
    }
        table thead th {
            background: #00113a;
            color: snow;
            font-size: 16px;
            position: sticky;
            top: -1%;
        }
        table.dataTable {
            clear: both;
            margin-top: 6px !important;
            margin-bottom: 6px !important;
            max-width: none !important;
            border-collapse: collapse !important;
            border-spacing: 0;
        }
    table tbody td {
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    nav{
        display:none !important;
    }
</style>

数据表顶部填充过多

1 个答案: