当我有 f"position:fixed" 侧边栏时居中表格

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

我有一个位置固定的侧边栏，我一直试图在侧边栏的边缘和屏幕的边缘之间居中放置一张桌子，我从来没有想过这个任务会给我带来这么多麻烦。这是我的代码：

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

body {
  background-color: #292929;
}

.sidebar-menu {
  background-color: #0A0A0A;
  display: flex;
  flex-direction: column;
  width: 100px;
  position: fixed;
  height: 100%;
  padding: 20px;
  padding-bottom: 100px;
  justify-content: top;
  align-items: center;
  border-right: 3px solid #1098F7;
}

.sidebar-items {
  margin: 40px 0;
}

.sidebar-items:hover {
  color: #1098F7;
}

#sidebar-logo {
  color: #1098F7;
  font-family: "Raleway", sans-serif;
  font-weight: 900;
  font-size: 40px;
  margin-top: 400px;
  user-select: none;
}

.fa-solid {
  color: white;
}

.fa-solid:hover {
  color: #1098F7;
}

table {
  font-size: 30px;
  color: white;
  border-collapse: collapse;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  min-width: 1300px;
}
<div class="sidebar">
  <ul class="sidebar-menu">
    <li class="sidebar-items"><a href=""><i class="fa-solid fa-plus fa-4x"></i></a></li>
    <li class="sidebar-items"><a href=""><i class="fa-solid fa-chart-simple fa-4x"></i></a></li>
    <li class="sidebar-items"><a href=""><i class="fa-solid fa-hourglass-half fa-4x"></i></a></li>
    <h1 id="sidebar-logo">HMH</h1>
  </ul>
</div>

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>header1</th>
        <th>header2</th>
        <th>header 3</th>
        <th>header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>10</td>
        <td>1000</td>
        <td>1000</td>
      </tr>
    </tbody>
  </table>
</div>

我和 chatgpt 一直在就如何执行此操作进行多次争论，每次它给我新代码要么使侧边栏可滚动，要么表格基于全屏而不是侧边栏边缘居中，所以每边甚至没有空格。

将 body 变成一个 flexbox 是最常见的建议，但我就是无法让它工作。

还要注意有人提出了一些类似的问题，但我已尝试实施解决方案并再次面临侧边栏滚动的问题。

非常感谢任何帮助，谢谢。

html css html-table flexbox centering
2个回答
0
投票

你知道侧边栏的宽度和你设置的一样（100px + 2 * 20px padding）。

所以你可以将 table-container 定位到左边 140px。并且可以给它一个 100vw 减去 140px 的宽度（假设这是你的目标）。

在此片段中，表格以老式的 

margin: 0 auto

为中心 

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

body {
  background-color: #292929;
}

.sidebar-menu {
  background-color: #0A0A0A;
  display: flex;
  flex-direction: column;
  width: 100px;
  position: fixed;
  height: 100%;
  padding: 20px;
  padding-bottom: 100px;
  justify-content: top;
  align-items: center;
  border-right: 3px solid #1098F7;
}

.sidebar-items {
  margin: 40px 0;
}

.sidebar-items:hover {
  color: #1098F7;
}

#sidebar-logo {
  color: #1098F7;
  font-family: "Raleway", sans-serif;
  font-weight: 900;
  font-size: 40px;
  margin-top: 400px;
  user-select: none;
}

.fa-solid {
  color: white;
}

.fa-solid:hover {
  color: #1098F7;
}

.table-container {
  margin-left: 140px;
  width: calc(100vw - 140px);
}

table {
  font-size: 30px;
  color: white;
  border-collapse: collapse;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  min-width: 1300px;
  margin: 0 auto;
  background-color: gray;
  /* just for demo */
}
<div class="sidebar">
  <ul class="sidebar-menu">
    <li class="sidebar-items"><a href=""><i class="fa-solid fa-plus fa-4x"></i></a></li>
    <li class="sidebar-items"><a href=""><i class="fa-solid fa-chart-simple fa-4x"></i></a></li>
    <li class="sidebar-items"><a href=""><i class="fa-solid fa-hourglass-half fa-4x"></i></a></li>
    <h1 id="sidebar-logo">HMH</h1>
  </ul>

</div>

<div class="table-container">
  <table>
    <thead>

      <tr>
        <th>header1</th>
        <th>header2</th>
        <th>header 3</th>
        <th>header 4</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>1</td>
        <td>10</td>
        <td>1000</td>
        <td>1000</td>
      </tr>
    </tbody>

  </table>
</div>

当然，鉴于桌子上的最小宽度较大，这仅适用于相当大的视口。我假设您对较窄的视口有不同的布局/宽度约束集。

0
投票

我对代码做了很多修改。您可以查看以下代码。

您也可以使用codepen进行控制：https://codepen.io/yusufdogandev/pen/bGmpLZR

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page {
  display: flex;
overflow-x: hidden;
}

body {
  background-color: #292929;
}

table,
th,
td {
  text-align: center;
  padding-right: 10px;
}

.sidebar {
  background-color: #0a0a0a;
  display: flex;
  position: relative;
  min-width: 200px;
  height: 888px;
  padding: 20px;
  border-right: 3px solid #1098f7;
  float:left;
}

.sidebar-items {
  margin: 40px 0;
}

.sidebar-items:hover {
  color: #1098f7;
}

#sidebar-logo {
  color: #1098f7;
  font-family: "Raleway", sans-serif;
  font-weight: 900;
  font-size: 40px;
  user-select: none;
  position: relative;
  display: flex;
  align-items: flex-end;
  left:50px;
}

.fa-solid {
  color: white;
}

.fa-solid:hover {
  color: #1098f7;
}

.table-container {
  font-size: 30px;
  color: white;
  border-collapse: collapse;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  width: 80%;
  height: 100%;
  margin-left: 5em;
  margin-top: 20px;
}

@media screen and (max-width: 1000px) {
  .table-container {
    font-size: 15px;;
    color: white;
    border-collapse: collapse;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    z-index: 1;
    width: 80%;
    height: 100%;
    margin-left: 5em;
    margin-top: 20px;
  }
}

@media screen and (max-width: 634px) {
  .table-container {
    font-size:10px;
  }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="page">
      <div class="sidebar">
        <h1 id="sidebar-logo">HMH</h1>
        <ul class="sidebar-menu">
          <li class="sidebar-items">
            <a href=""><i class="fa-solid fa-plus fa-4x"></i></a>
          </li>
          <li class="sidebar-items">
            <a href=""><i class="fa-solid fa-chart-simple fa-4x"></i></a>
          </li>
          <li class="sidebar-items">
            <a href=""><i class="fa-solid fa-hourglass-half fa-4x"></i></a>
          </li>
        </ul>
      </div>

      <div class="table-container">
        <table style="width: 100%">
          <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
          </tr>
          <tr>
            <td>1</td>
            <td>10</td>
            <td>100</td>
            <td>1000</td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>

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