CSS 网格单元格中表格的滚动问题

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

我对 html/css 比较陌生，因为我职业生涯的大部分时间都花在 WPF 桌面应用程序上。我已经开始提供一些应用程序的网络版本，并且一直在享受学习之旅。我最近遇到了一个布局问题，并创建了一个我想要实现的示例。该示例模拟仪表板样式页面，其中卡片在网格中对齐。网格的顶层行具有固定高度，其中第二行扩展和收缩以填充可用空间。来自 WPF/XAML 的我一直在大部分布局中使用 CSS 网格。我遇到的问题是，在不在顶行的卡片中，我希望有一些表格能够在各个“卡片”内提供滚动条。真正发生的情况是，当缩小窗口的高度时，整个窗口的滚动条将接管，而不是我希望通过将 

overflow: auto
标签添加到卡的主体部分来工作的单个卡/表格滚动条。

我提供了下面的示例，它将以比我迄今为止所用的更好的方式解释它。任何有关我做错了什么的指示将不胜感激。

Codepen 示例

html body {
   background-color: #111111;
   margin: 0px;
   width: 100vw;
   height: 100vh;
}

.top-level-container{
   display:grid;
   grid-template-rows: [HEADER] auto [BODY] 1fr;
   height: 100%;
}

.top-level-container .header {
   display:grid;
   grid-row: HEADER;
   grid-template-columns: [LEFT] 1fr [CENTER] 1fr [RIGHT] 1fr;
   height: 125px;
}

.card {
   display:grid;
   background-color: #333333;
   border-radius: 8px;
   grid-template-rows: [CARDHEADER] auto [CARDBODY] 1fr [CARDFOOTER] 10px;
}

.card .card-header {
   grid-row: CARDHEADER;
   font-family: Roboto, Arial, Helvetica, sans-serif;
   font-size: x-small;
   font-weight: 700;
   color: white;
   margin: 8px;
}

.card .card-body {
   grid-row: CARDBODY;
   font-family: Roboto, Arial, Helvetica, sans-serif;
   font-size: xx-small;
   font-weight: 500;
   color: white;
   overflow: auto;
}

.card .card-footer {
   grid-row: CARDFOOTER;
}

.top-level-container .header .header-left {
   grid-column: LEFT;
   margin:10px 5px 5px 10px;
}

.top-level-container .header .header-middle {
   grid-column: CENTER;
   margin:10px 5px 5px 5px;
}
.top-level-container .header .header-right {
   grid-column: RIGHT;
   margin:10px 10px 5px 5px;
}

.top-level-container .content {
   display:grid;
   grid-row: BODY;
   grid-template-columns: [LEFT] 1fr [RIGHT] 1fr;
}
.top-level-container .content .content-left {
   display: grid;
   grid-template-rows: [TOP] 1fr [BOTTOM] 1fr;
   grid-column: LEFT;
   margin: 5px 5px 10px 10px;
}

.top-level-container .content .content-left .content-left-top {
   grid-row: [TOP];
   margin-bottom: 5px;
}

.top-level-container .content .content-left .content-left-bottom {
   grid-row: [BOTTOM];
   margin-top: 5px;
}

.top-level-container .content .content-right {
   grid-column: RIGHT;
   margin: 5px 10px 10px 5px;
}

td {
   padding: 4px 10px 4px 10px;
}

tr {
   background-color: #111111;
}
<div class="top-level-container">
  <div class="header">
     <div class="card header-left">
        <div class="card-header">FIXED HEIGHT</div>
     </div>
     <div class="card header-middle">
        <div class="card-header">FIXED HEIGHT</div>
     </div>
     <div class="card header-right">
        <div class="card-header">FIXED HEIGHT</div>
     </div>
  </div>
  <div class="content">
     <div class="content-left">
        <div class="card content-left-top">
           <div class="card-header">SCROLLABLE BODY</div>
           <div class="card-body">
              <table>
                 <tr>
                    <td>00:00:00</td>
                    <td>ComponentX</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                 </tr>
                 <tr>
                    <td>00:00:21</td>
                    <td>ComponentY</td>
                    <td>In quis purus a odio facilisis egestas ut in magna.</td>
                 </tr>
                 <tr>
                    <td>00:01:12</td>
                    <td>ComponentZ</td>
                    <td>In ultricies magna et sollicitudin condimentum.</td>
                 </tr>
                 </table>
           </div>
        </div>
        <div class="card content-left-bottom">
           <div class="card-header">SCROLLABLE BODY</div>
           <div class="card-body">
              <table>
                 <tr>
                    <td>00:00:00</td>
                    <td>ComponentX</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                 </tr>
                 <tr>
                    <td>00:00:21</td>
                    <td>ComponentY</td>
                    <td>In quis purus a odio facilisis egestas ut in magna.</td>
                 </tr>
                 <tr>
                    <td>00:01:12</td>
                    <td>ComponentZ</td>
                    <td>In ultricies magna et sollicitudin condimentum.</td>
                 </tr>
                 </table>
           </div>
        </div>
     </div>
     <div class="card content-right">
        <div class="card-header">SCROLLABLE BODY</div>
        <div class="card-body">
           <table>
              <tr>
                 <td>00:00:00</td>
                 <td>ComponentX</td>
                 <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
              </tr>
              <tr>
                 <td>00:00:21</td>
                 <td>ComponentY</td>
                 <td>In quis purus a odio facilisis egestas ut in magna.</td>
              </tr>
              <tr>
                 <td>00:01:12</td>
                 <td>ComponentZ</td>
                 <td>In ultricies magna et sollicitudin condimentum.</td>
              </tr>
              <tr>
                 <td>00:04:02</td>
                 <td>ComponentA</td>
                 <td>Etiam bibendum dui nec velit sagittis, sed gravida elit commodo.</td>
              </tr>
              <tr>
                 <td>00:00:00</td>
                 <td>ComponentB</td>
                 <td>Quisque facilisis odio eu diam malesuada euismod.</td>
              </tr>
              <tr>
                 <td>00:00:21</td>
                 <td>ComponentC</td>
                 <td>Sed tincidunt magna at nulla suscipit, in rhoncus sem ultrices.</td>
              </tr>
              <tr>
                 <td>00:01:12</td>
                 <td>ComponentD</td>
                 <td>Sed et mauris in mauris dapibus faucibus nec quis neque.</td>
              </tr>
              <tr>
                 <td>00:04:02</td>
                 <td>ComponentE</td>
                 <td>Phasellus vulputate turpis in felis suscipit, quis tempor elit molestie.</td>
              </tr>
           </table>
        </div>
     </div>
  </div>
</div>

css html-table scroll css-grid dashboard
1个回答
0
投票

这绝对是可行的。

const lipsum = `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed pharetra sem. Nam erat purus, pretium vel placerat sit amet, commodo eu odio. Nunc mattis leo justo, id posuere orci mattis eget. Fusce sit amet dictum nulla. Integer ut lobortis urna. Donec vitae pellentesque ligula, eu mattis nisi. In augue ex, pellentesque eu rhoncus eu, elementum ut leo. Aliquam at dignissim lorem, at tincidunt nisi. Mauris accumsan lectus ut ligula volutpat suscipit.
</p>
<p>
Ut sodales mi libero, vel vestibulum enim dignissim id. Donec ac pulvinar tortor, et semper quam. Donec quis sagittis odio. Integer mattis laoreet enim, sed interdum neque egestas sed. Proin lacinia congue felis, sed cursus turpis. Donec non tincidunt justo. Morbi eu vestibulum tortor, id tincidunt neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam viverra lectus non mauris interdum, vel elementum leo lobortis. Vivamus tempor imperdiet ultrices. Cras ac felis porttitor, tincidunt nulla at, congue ligula. Curabitur vitae justo vel eros condimentum suscipit et id ante. Maecenas in bibendum quam, sit amet tincidunt tortor.
</p>
<p>
Cras fringilla est ipsum, eget mattis urna efficitur ut. Mauris a orci risus. Duis eget lacinia nulla. Nam porta faucibus mattis. Integer rhoncus orci vel lectus eleifend suscipit. Mauris nec hendrerit massa, at convallis sem. Quisque id facilisis diam. Cras quis sem vel augue pretium eleifend. Praesent ultrices diam hendrerit cursus consequat.
</p>
<p>
Etiam ultrices nunc vitae massa congue, vel rhoncus velit dignissim. Donec vel pulvinar mauris, vel ultrices ipsum. Praesent ut ligula non dui interdum pellentesque. Etiam sagittis eget mi vitae tristique. Duis at rhoncus enim. Vivamus efficitur faucibus nisl in tempor. Aenean ac lacinia ipsum. Ut orci odio, facilisis vitae venenatis at, gravida sed sapien. Vivamus lacinia nisi non ipsum efficitur scelerisque. Sed ac lorem a diam aliquet aliquam. Aenean ligula ligula, maximus non dolor at, ultrices fermentum elit.
</p>
<p>
Quisque efficitur dui faucibus sem tincidunt elementum. Ut porta id turpis nec efficitur. Praesent pulvinar metus nisl. Cras porttitor semper sapien, a porta tellus convallis non. Mauris volutpat sit amet ex ut viverra. Integer non magna lobortis, congue diam vel, posuere turpis. Quisque euismod, arcu quis scelerisque condimentum, magna justo ornare orci, vel sagittis ante sapien eu mi. Vivamus ullamcorper laoreet justo vel vestibulum. Donec et sodales lorem, id tempus nisi. Pellentesque ullamcorper at risus id varius. Sed eget orci urna.
</p>
<p>
Pellentesque viverra egestas lacus, vel euismod dolor. Maecenas nulla eros, sodales at lobortis non, venenatis non dui. Mauris condimentum in ipsum id sollicitudin. Sed pellentesque turpis in vulputate volutpat. In luctus iaculis elit, et placerat nibh ornare at. Pellentesque tincidunt, tortor ac pharetra placerat, arcu dui sollicitudin arcu, in egestas elit mauris eu felis. Sed ut ex nec leo vehicula consectetur. Nam a lectus eu augue malesuada cursus. Quisque posuere quam a elit tempus mollis. Duis eget mi eu urna hendrerit egestas eget vitae ligula. Integer condimentum tortor a turpis auctor, et egestas lorem scelerisque. In venenatis arcu id fringilla finibus. Vivamus facilisis venenatis dui, eu vehicula magna fermentum vitae.
</p>
<p>
Praesent imperdiet, quam quis sodales porttitor, tortor leo laoreet lorem, ac rutrum neque est sit amet eros. Curabitur aliquet porttitor sem id pulvinar. Vestibulum posuere pellentesque augue, eget consequat erat tincidunt eu. Aliquam blandit condimentum ligula vitae consequat. Aliquam eu purus eu massa imperdiet iaculis eu vitae leo. Maecenas quis varius nulla, quis cursus justo. Fusce ligula massa, sagittis vel ex id, auctor ultricies mi. Quisque sit amet luctus elit.
</p>
<p>
Nulla vel magna in ligula condimentum venenatis id nec eros. Maecenas porttitor condimentum sapien sed sodales. Vivamus blandit tellus blandit risus consequat, ac eleifend elit pharetra. Maecenas lorem tortor, scelerisque vitae aliquam sit amet, accumsan nec metus. Aliquam dapibus velit sed lacus iaculis euismod. Curabitur congue lectus at ligula mollis, nec faucibus tellus pretium. Vivamus viverra dignissim risus, a vulputate dolor malesuada finibus. Mauris eget elementum lorem. Fusce quis vulputate justo. Vestibulum tincidunt orci lorem, ac sodales enim interdum eu. Nullam ultrices lorem sed ante ultrices hendrerit. Donec varius ultrices est sed venenatis. Praesent dignissim vestibulum porta. Vestibulum tincidunt urna libero, eget bibendum arcu molestie nec. Vestibulum eget vestibulum justo.
</p>
<p>
Proin eget ante a elit cursus sollicitudin sed sed metus. In at mauris quis libero tincidunt ultricies quis ultricies purus. Pellentesque condimentum nunc eget mauris convallis placerat quis vitae nunc. Maecenas volutpat sed nisl nec congue. Nullam ullamcorper faucibus urna, quis suscipit dolor ullamcorper faucibus. Donec vitae gravida tellus, eu mollis mi. Nulla sed risus ultricies, gravida tortor vitae, cursus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur et eros mi. Phasellus fringilla varius consectetur.
</p>
<p>
Quisque nec orci sed dolor fringilla dapibus id non turpis. Fusce sed ultrices neque. Integer in laoreet tortor. Sed sit amet bibendum ex. Vestibulum tempus, tellus sit amet varius elementum, turpis urna fermentum libero, eget elementum dolor tortor eget sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
</p>
`

document.querySelectorAll('.card-body').forEach(d => {
  d.innerHTML = lipsum
})
html, body, .top-level-container {
  height: 100%;
}

body {
  background-color: #111111;
  margin: 0px;
  font-family: sans-serif;
}

.top-level-container {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: 125px repeat(2, minmax(0, 1fr));
  padding: 8px;
  gap: 8px;
  box-sizing: border-box;
}

.card {
  background-color: #333333;
  border-radius: 8px;
  color: white;
  display: grid;
  grid-template-rows: auto 1fr auto;
  box-sizing: border-box;
  overflow: hidden;
}

.card-header, .card-footer {
  font-size: x-small;
  font-weight: 700;
  text-transform: uppercase;
  padding: 8px;
}

.card-header {
  background: blue;
}
.card-footer {
  background: maroon;
}

.card-body {
  padding: 0 8px;
  font-size: xx-small;
  font-weight: 500;
  overflow: auto;
}

.card-footer {
  font-size: x-small;
}

.header-left {
   grid-column: 1 / span 2;
}
.header-middle {
   grid-column: 3 / span 2;
}
.header-right {
   grid-column: 5 / span 2;
}
.content-left-top {
  grid-column: 1 / span 3;
  grid-row: 2;
}
.content-left-bottom {
  grid-column: 1 / span 3;
  grid-row: 3;
}
.content-right {
  grid-column: 4 / span 3;
  grid-row: 2 / span 2;
}
<div class="top-level-container">
  <div class="card header-left">
    <div class="card-header">FIXED HEIGHT</div>
  </div>
  <div class="card header-middle">
    <div class="card-header">FIXED HEIGHT</div>
  </div>
  <div class="card header-right">
    <div class="card-header">FIXED HEIGHT</div>
  </div>
  <div class="card content-left-top">
    <div class="card-header">SCROLLABLE BODY</div>
    <div class="card-body"></div>
    <div class="card-footer">footer here</div>
  </div>
  <div class="card content-left-bottom">
    <div class="card-header">SCROLLABLE BODY</div>
    <div class="card-body"></div>
    <div class="card-footer">footer here</div>
  </div>
  <div class="card content-right">
    <div class="card-header">SCROLLABLE BODY</div>
    <div class="card-body"></div>
    <div class="card-footer">footer here</div>
  </div>
</div>

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