如何将表格置于 div 内居中，同时又不丢失溢出

问题描述 投票：0回答：1

我有一个包含 2 个部分的仪表板 HTML 页面：

对于垂直导航栏 对于一桌人（以及稍后可选的一些 h1 文本）

我只是想要一种让表格在 main 中居中的方法，当它变小时，会出现一个滚动条以防止 x 溢出。

问题是：当表格变得比屏幕大时，它开始隐藏在导航后面

此外，如果你们中的任何人可以帮助我让滚动条出现在表格主体上而不是表格外部或 div 上，我也将不胜感激

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="../nav.css">
    <link rel="stylesheet" href="dashboard.css">
    <title>Dashboard</title>
</head>
<body>
    <nav class="navbar">
        <ul class="navbar-nav">
            <li class="navbar-item"><img src="../cri.png" alt="Logo of CRI"></li>
            <li class="navbar-item active"><a href="../dashboard/dashboard.html" class="nav-link">Dashboard</a></li>
            <li class="navbar-item"><a href="../search/search.html" class="nav-link">Advanced Search</a></li>
            <li class="navbar-item"><a href="../current/current.html" class="nav-link">Current interns</a></li>
            <li class="navbar-item"><a href="../logs/logs.html" class="nav-link">Read Logs</a></li>
            <li class="navbar-item"><a href="#" class="nav-link">Disconnect</a></li>
        </ul>
    </nav>
    <main>
        <div class="div-table">
            <table class="table">
                <thead>
                    <tr>
                        <th>
                            Nom
                        </th>
                        <th>
                            Prenom
                        </th>
                        <th>
                            CIN
                        </th>
                        <th>
                            Email
                        </th>
                        <th>
                            Numero
                        </th>
                        <th>
                            Etudiant
                        </th>
                        <th>
                            CV
                        </th>
                        <th>
                            Accepter
                        </th>
                        <th>
                            Refuser
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Abdelhak</td>
                        <td>Abdelaziz</td>
                        <td>BD2034591</td>
                        <td>[email protected]</td>
                        <td>+212672729112</td>
                        <td>Oui</td>
                        <td><a class="file" href=""><img class="icons" src="file.svg" alt="file"></a></td>
                        <td><a class="link-accepted" href=""><img class="icons" src="accepted.svg" alt="accepted"></a></td>
                        <td><a class="link-rejected" href=""><img class="icons" src="rejected.svg" alt="rejected"></a></td>
                    </tr>
                    <tr>
                        <td>Abdelhak</td>
                        <td>Abdelaziz</td>
                        <td>BD2034591</td>
                        <td>[email protected]</td>
                        <td>+212672729112</td>
                        <td>Oui</td>
                        <td><a class="file" href=""><img class="icons" src="file.svg" alt="file"></a></td>
                        <td><a class="link-accepted" href=""><img class="icons" src="accepted.svg" alt="accepted"></a></td>
                        <td><a class="link-rejected" href=""><img class="icons" src="rejected.svg" alt="rejected"></a></td>
                    </tr>
                    <tr>
                        <td>Abdelhak</td>
                        <td>Abdelaziz</td>
                        <td>BD2034591</td>
                        <td>[email protected]</td>
                        <td>+212672729112</td>
                        <td>Oui</td>
                        <td><a class="file" href=""><img class="icons" src="file.svg" alt="file"></a></td>
                        <td><a class="link-accepted" href=""><img class="icons" src="accepted.svg" alt="accepted"></a></td>
                        <td><a class="link-rejected" href=""><img class="icons" src="rejected.svg" alt="rejected"></a></td>
                    </tr>
                    <tr>
                        <td>Abdelhak</td>
                        <td>Abdelaziz</td>
                        <td>BD2034591</td>
                        <td>[email protected]</td>
                        <td>+212672729112</td>
                        <td>Oui</td>
                        <td><a class="file" href=""><img class="icons" src="file.svg" alt="file"></a></td>
                        <td><a class="link-accepted" href=""><img class="icons" src="accepted.svg" alt="accepted"></a></td>
                        <td><a class="link-rejected" href=""><img class="icons" src="rejected.svg" alt="rejected"></a></td>
                    </tr>
                    <tr>
                        <td>Abdelhak</td>
                        <td>Abdelaziz</td>
                        <td>BD2034591</td>
                        <td>[email protected]</td>
                        <td>+212672729112</td>
                        <td>Oui</td>
                        <td><a class="file" href=""><img class="icons" src="file.svg" alt="file"></a></td>
                        <td><a class="link-accepted" href=""><img class="icons" src="accepted.svg" alt="accepted"></a></td>
                        <td><a class="link-rejected" href=""><img class="icons" src="rejected.svg" alt="rejected"></a></td>
                    </tr>
                    <tr>
                        <td>Abdelhak</td>
                        <td>Abdelaziz</td>
                        <td>BD2034591</td>
                        <td>[email protected]</td>
                        <td>+212672729112</td>
                        <td>Oui</td>
                        <td><a class="file" href=""><img class="icons" src="file.svg" alt="file"></a></td>
                        <td><a class="link-accepted" href=""><img class="icons" src="accepted.svg" alt="accepted"></a></td>
                        <td><a class="link-rejected" href=""><img class="icons" src="rejected.svg" alt="rejected"></a></td>
                    </tr>
                    <tr>
                        <td>Abdelhak</td>
                        <td>Abdelaziz</td>
                        <td>BD2034591</td>
                        <td>[email protected]</td>
                        <td>+212672729112</td>
                        <td>Oui</td>
                        <td><a class="file" href=""><img class="icons" src="file.svg" alt="file"></a></td>
                        <td><a class="link-accepted" href=""><img class="icons" src="accepted.svg" alt="accepted"></a></td>
                        <td><a class="link-rejected" href=""><img class="icons" src="rejected.svg" alt="rejected"></a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </main>
</body>
</html>

导航CSS

:root{
    font-size: 16px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    scrollbar-width: thin;
}

body{
    margin: 0;
    padding: 0;
    color: black;
    overflow-x: hidden;
    overflow-y: auto;
}

main{
    margin-left: 15rem;
    padding: 1rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.navbar{
    display: flex;
    position: fixed;
    height: 100vh;
    width: 15rem;
    background-color: #fafafa;
}

.navbar-nav{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.navbar-item{
    width: 15rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-item:first-child{
    width: 15rem;
    height: 5rem;
}

.navbar-item:first-child img{
    width: 7rem;
    height: auto;
}


.navbar-item:not(:first-child):hover{
    background-color: rgb(222, 221, 221);
}

.navbar-item:not(:first-child):active {
    background-color: #0f9660;
}

.navbar-item:not(:first-child):active>a {
    color: white;
}

.navbar-item:last-child{
    border: none;
    margin-top: auto;
}

.navbar-item:last-child a:hover {
    background-color: #da413e;
    color: white;
}


.nav-link{
    color: black;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.navbar-item svg{
    width: 1rem;
    height: auto;
}

.active{
    background-color: rgb(222, 221, 221);
}

仪表板.css

.table thead{
    background-color: #0f9660;
    color: white;
}

.div-table{
    border-radius: 10px;
}

.div-table table{
    width: 48rem;
    border: 1px solid white;
}

.table th{
    width: 6rem;
    height: 2rem;
    padding: 0 1rem;
}
.table td{
    padding: 0 1rem;
    text-align: center;
}

.table tr:nth-of-type(even){
    background-color: #e2e2e2;
}

.icons{
    width: auto;
    height: 1rem;
}

我在 main 中使用了 

display: flex
和 
justify-content: center
，它可以工作，但是当表格比 main 宽时，左侧开始消失并隐藏在导航后面。

我还尝试从导航栏中删除固定内容并使所有内容都变得灵活，但这引起了奇怪的问题，特别是因为我需要修复导航栏以防 y 溢出

html css overflow css-tables
1个回答
0
投票

这是因为您在垂直导航栏上设置了 

position:fixed
，这使其脱离了正常流程。 
main
上设置的边距不会遵守它。

一种选择是使用 Flex 容器并在 

margin:auto
上使用 
main
。

.wrapper {
    display: flex;
}

main{
    margin: 0 auto;
    padding: 1rem;
    overflow-x: auto;
    scrollbar-width: thin;
}


:root {
  font-size: 16px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  scrollbar-width: thin;
}

body {
  margin: 0;
  padding: 0;
  color: black;
  overflow-x: hidden;
  overflow-y: auto;
}

main {
  margin: 0 auto;
  padding: 1rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.navbar {
  display: flex;
  height: 100vh;
  width: 15rem;
  background-color: #fafafa;
}

.navbar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.navbar-item {
  width: 15rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-item:first-child {
  width: 15rem;
  height: 5rem;
}

.navbar-item:first-child img {
  width: 7rem;
  height: auto;
}

.navbar-item:not(:first-child):hover {
  background-color: rgb(222, 221, 221);
}

.navbar-item:not(:first-child):active {
  background-color: #0f9660;
}

.navbar-item:not(:first-child):active>a {
  color: white;
}

.navbar-item:last-child {
  border: none;
  margin-top: auto;
}

.navbar-item:last-child a:hover {
  background-color: #da413e;
  color: white;
}

.nav-link {
  color: black;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.navbar-item svg {
  width: 1rem;
  height: auto;
}

.active {
  background-color: rgb(222, 221, 221);
}

.table thead {
  background-color: #0f9660;
  color: white;
}

.div-table {
  border-radius: 10px;
}

.div-table table {
  width: 48rem;
  border: 1px solid white;
}

.table th {
  width: 6rem;
  height: 2rem;
  padding: 0 1rem;
}

.table td {
  padding: 0 1rem;
  text-align: center;
}

.table tr:nth-of-type(even) {
  background-color: #e2e2e2;
}

.icons {
  width: auto;
  height: 1rem;
}

.wrapper {
  display: flex;
}
<div class=wrapper>
  <nav class="navbar">
    <ul class="navbar-nav">
      <li class="navbar-item"><img src="../cri.png" alt="Logo of CRI"></li>
      <li class="navbar-item active"><a href="../dashboard/dashboard.html" class="nav-link">Dashboard</a></li>
      <li class="navbar-item"><a href="../search/search.html" class="nav-link">Advanced Search</a></li>
      <li class="navbar-item"><a href="../current/current.html" class="nav-link">Current interns</a></li>
      <li class="navbar-item"><a href="../logs/logs.html" class="nav-link">Read Logs</a></li>
      <li class="navbar-item"><a href="#" class="nav-link">Disconnect</a></li>
    </ul>
  </nav>
  <main>
    <div class="div-table">
      <table class="table">
        <thead>
          <tr>
            <th>
              Nom
            </th>
            <th>
              Prenom
            </th>
            <th>
              CIN
            </th>
            <th>
              Email
            </th>
            <th>
              Numero
            </th>
            <th>
              Etudiant
            </th>
            <th>
              CV
            </th>
            <th>
              Accepter
            </th>
            <th>
              Refuser
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Abdelhak</td>
            <td>Abdelaziz</td>
            <td>BD2034591</td>
            <td>[email protected]</td>
            <td>+212672729112</td>
            <td>Oui</td>
            <td>
              <a class="file" href=""><img class="icons" src="file.svg" alt="file"></a>
            </td>
            <td>
              <a class="link-accepted" href=""><img class="icons" src="accepted.svg" alt="accepted"></a>
            </td>
            <td>
              <a class="link-rejected" href=""><img class="icons" src="rejected.svg" alt="rejected"></a>
            </td>
          </tr>
          <tr>
            <td>Abdelhak</td>
            <td>Abdelaziz</td>
            <td>BD2034591</td>
            <td>[email protected]</td>
            <td>+212672729112</td>
            <td>Oui</td>
            <td>
              <a class="file" href=""><img class="icons" src="file.svg" alt="file"></a>
            </td>
            <td>
              <a class="link-accepted" href=""><img class="icons" src="accepted.svg" alt="accepted"></a>
            </td>
            <td>
              <a class="link-rejected" href=""><img class="icons" src="rejected.svg" alt="rejected"></a>
            </td>
          </tr>
          <tr>
            <td>Abdelhak</td>
            <td>Abdelaziz</td>
            <td>BD2034591</td>
            <td>[email protected]</td>
            <td>+212672729112</td>
            <td>Oui</td>
            <td>
              <a class="file" href=""><img class="icons" src="file.svg" alt="file"></a>
            </td>
            <td>
              <a class="link-accepted" href=""><img class="icons" src="accepted.svg" alt="accepted"></a>
            </td>
            <td>
              <a class="link-rejected" href=""><img class="icons" src="rejected.svg" alt="rejected"></a>
            </td>
          </tr>
          <tr>
            <td>Abdelhak</td>
            <td>Abdelaziz</td>
            <td>BD2034591</td>
            <td>[email protected]</td>
            <td>+212672729112</td>
            <td>Oui</td>
            <td>
              <a class="file" href=""><img class="icons" src="file.svg" alt="file"></a>
            </td>
            <td>
              <a class="link-accepted" href=""><img class="icons" src="accepted.svg" alt="accepted"></a>
            </td>
            <td>
              <a class="link-rejected" href=""><img class="icons" src="rejected.svg" alt="rejected"></a>
            </td>
          </tr>
          <tr>
            <td>Abdelhak</td>
            <td>Abdelaziz</td>
            <td>BD2034591</td>
            <td>[email protected]</td>
            <td>+212672729112</td>
            <td>Oui</td>
            <td>
              <a class="file" href=""><img class="icons" src="file.svg" alt="file"></a>
            </td>
            <td>
              <a class="link-accepted" href=""><img class="icons" src="accepted.svg" alt="accepted"></a>
            </td>
            <td>
              <a class="link-rejected" href=""><img class="icons" src="rejected.svg" alt="rejected"></a>
            </td>
          </tr>
          <tr>
            <td>Abdelhak</td>
            <td>Abdelaziz</td>
            <td>BD2034591</td>
            <td>[email protected]</td>
            <td>+212672729112</td>
            <td>Oui</td>
            <td>
              <a class="file" href=""><img class="icons" src="file.svg" alt="file"></a>
            </td>
            <td>
              <a class="link-accepted" href=""><img class="icons" src="accepted.svg" alt="accepted"></a>
            </td>
            <td>
              <a class="link-rejected" href=""><img class="icons" src="rejected.svg" alt="rejected"></a>
            </td>
          </tr>
          <tr>
            <td>Abdelhak</td>
            <td>Abdelaziz</td>
            <td>BD2034591</td>
            <td>[email protected]</td>
            <td>+212672729112</td>
            <td>Oui</td>
            <td>
              <a class="file" href=""><img class="icons" src="file.svg" alt="file"></a>
            </td>
            <td>
              <a class="link-accepted" href=""><img class="icons" src="accepted.svg" alt="accepted"></a>
            </td>
            <td>
              <a class="link-rejected" href=""><img class="icons" src="rejected.svg" alt="rejected"></a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </main>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.