网格布局内的可滚动tbody

时间：2017-09-11 22:45:51

标签： html css css3

我使用css网格有一个简单的3部分布局（标题/侧边栏/内容）。在我的内容中，我有一张桌子。

我希望表格填充div.content中的剩余空格，并让tbody拥有自己的滚动条。

overflow-y: scroll;和position: relative的各种组合 宽度/高度会导致div.content获取滚动条或<table>溢出（请参阅示例 - 同样位于jsbin）。

如何让这些表<tbody>接收滚动条，让表本身由内容div限制而不会溢出？

＆＃13;
＆＃13; 
html, body {
  margin: 0;
  height: 100%;
}

main {
  display: grid;
  grid-template-areas: 'header header' 'sidebar content';
  grid-template-rows: 100px 1fr;
  grid-template-columns: 200px 1fr;
  width: 100%;
  height: 100%;
}


header {
  background-color: #CCC;
  grid-area: header;
  padding: 20px;
}
aside {
  background-color: #EEE;
  grid-area: sidebar;
  padding: 10px;
}
aside img {
  width: 100%;
  mix-blend-mode: darken;
}
div.content {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-area: content;
  min-height: 0;
  min-width: 0;
  padding: 10px;
  max-height: 100%;
  border-bottom: 2px solid black;
  overflow-y: scroll;
}

table {
  margin: 10px;
  width: 100%;
}
thead {
  text-align: left;
}
tbody {
  height: 100%;
  overflow-y: scroll;
}

.code {
  font: 12px Courier;
  color: blue;
}
＆＃13; 
<main>
      <header>
        <h2>Really rad app title</h2>
      </header>
      <aside>
        <img src="https://thumb7.shutterstock.com/display_pic_with_logo/436114/423846025/stock-vector-example-stamp-423846025.jpg" />
        <span>Some Contextual Informations and other such sidebar-y things<span>
      </aside>
      <div class="content">
        <h3>Some Stuffs</h3>
        <div>
          Why does this <span class="code">&lt;tbody&gt;</span> ignore my <span class="code">overflow-y: scroll;</span>?
          <br /><br />
          I want <span class="code">div.content</span> to act as a portal/window, with everything around it remaining fixed; but I want the table to stop before the bottom of this window and have a scrollable body (instead of scrolling this text offscreen).
        </div>
      
        <table>
          <thead><tr><th>One</th><th>Two</th><th>Three</th></tr></thead>
          <tbody>
<tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
          <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
          <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
          <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
          <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
          <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
          <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
          <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
          </tbody>
        </table>
      </div>
    </main>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

似乎表没有高度概念，所以我们使用包装div并添加flex-grow（你已经使用了flexbox）。

主要变化：

使用<div class='fill'></div>

打包表

css addition div.content .fill { flex: 1; overflow-y: scroll }

相关：CSS3 display:table, overflow-y:scroll doesn't work

＆＃13;
＆＃13; 
html, body {
  margin: 0;
  height: 100%;
}

main {
  display: grid;
  grid-template-areas: 'header header' 'sidebar content';
  grid-template-rows: 100px 1fr;
  grid-template-columns: 200px 1fr;
  width: 100%;
  height: 100%;
}


header {
  background-color: #CCC;
  grid-area: header;
  padding: 20px;
}
aside {
  background-color: #EEE;
  grid-area: sidebar;
  padding: 10px;
}
aside img {
  width: 100%;
  mix-blend-mode: darken;
}
div.content {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-area: content;
  min-height: 0;
  min-width: 0;
  padding: 10px;
  max-height: 100%;
  border-bottom: 2px solid black;
  overflow-y: scroll;
}

div.content .fill {
  flex: 1;
  overflow-y: scroll;
}

table {
  width: 100%;
  height: 100px;
  overflow: auto;
}
thead {
  text-align: left;
}
tbody {
  height: 100%;
  overflow-y: scroll;
}

.code {
  font: 12px Courier;
  color: blue;
}
＆＃13; 
<main>
      <header>
        <h2>Really rad app title</h2>
      </header>
      <aside>
        <img src="https://thumb7.shutterstock.com/display_pic_with_logo/436114/423846025/stock-vector-example-stamp-423846025.jpg" />
        <span>Some Contextual Informations and other such sidebar-y things<span>
      </aside>
      <div class="content">
        <h3>Some Stuffs</h3>
        <div>
          Why does this <span class="code">&lt;tbody&gt;</span> ignore my <span class="code">overflow-y: scroll;</span>?
          <br /><br />
          I want <span class="code">div.content</span> to act as a portal/window, with everything around it remaining fixed; but I want the table to stop before the bottom of this window and have a scrollable body (instead of scrolling this text offscreen).
        </div>
        <div class='fill'>
            <table>
              <thead><tr><th>One</th><th>Two</th><th>Three</th></tr></thead>
              <tbody>
    <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
              <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
              <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
              <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
              <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
              <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
              <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
              <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
              </tbody>
            </table>
        </div>
      </div>
    </main>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

你必须给出另一个tbody的高度值，如

tbody {
height: 200px;
overflow-y: scroll;
}

并显示 thead ， tbody ， tr 和 td 以blok属性显示它们： .table-fixed thead，.table-fixed tbody，.table-fixed tr，.table-fixed td，.table-fixed th { 显示：块; }

使用 Bootstrap ，让您创建一个易于使用的简单有效的页面：

这是一个适合我的完整前任：

这是html文件：

<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <!-- Bootstrap -->
 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
 <!--style -->
 <link rel="stylesheet" type="text/css" href="style/monStyle">
 <!-- Scripts-->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>  
<!--Table of list of employers-->
<div class="container">
  <table class="table table-fixed table-bordered">
    <thead>
      <tr>
        <th class="col-xs-2">N° </th>
        <th class="col-xs-3">Date </th>
        <th class="col-xs-2">Nombre J </th>
        <th class="col-xs-3">Intr</th>
        <th class="col-xs-2">Avis</th>
      </tr>
    </thead>
    <tbody>
     <tr>
      <td class="col-xs-2">1</td>
      <td class="col-xs-3">12/12/2016</td>
      <td class="col-xs-2">5 </td>
      <td class="col-xs-3">Dina</td>
      <td class="col-xs-2">Accepté</td>
    </tr>
    <tr>
      <td class="col-xs-2">2</td>
      <td class="col-xs-3">12/12/2016</td>
      <td class="col-xs-2">5 </td>
      <td class="col-xs-3">Lili</td>
      <td class="col-xs-2">Refusé</td>
    </tr>
  </tbody>
</table>
</div>
</body>
</html>

这是css文件：

 body {
    background-color: #bdc3c7;
    width: 800px;
    }
 /**Liste of emp**/
 .table-fixed {
 width: 100%;
 background-color: #f3f3f3;
 margin-top:10px;
 }
 .table-fixed tbody {
 max-height: 500px;
 height: 200px;
 overflow-y: auto;
 overflow-x: auto;
 width: 100%;
 }
 .table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
 display: block;
 }
 .table-fixed tbody td {
 float: left;
 }
 .table-fixed thead tr th {
 color: white;
 float: left;
 background-color:#42b43b ;

 }
 /* Buttom to diplay the information of empl*/
 .btncosulter
 {
 color:black;
 background-color:#f3f3f3;
 width:80px;
 border:none;
 height: 20px;
 }
 .btndec
 {
 color:black;
 background-color:#f3f3f3;
 width:35px;
 border:none;
 height: 20px;
 }
 h3
 {
 margin-left:16px;
 }
 #lstEmp
 {
 margin-top:-43px;
 }
相关问题
最新问题