Scrollable tbody im Raster Layout

Ich habe ein einfaches 3-teiliges Layout (Header/Sidebar/Inhalt) mit CSS-Gitter. In meinem Inhalt habe ich einen Tisch.Scrollable tbody im Raster Layout

Ich möchte die Tabelle füllen den verbleibenden Platz in der div.content und haben eine tbody mit einer eigenen Bildlaufleiste.

Jede Kombination von overflow-y: scroll; und position: relative mit verschiedenen Breiten/Höhen führen entweder die div.content die Scrollbar bekommen, oder die <table> überfüllt (Beispiel siehe - auch auf jsbin).

Wie kann ich diese Tabellen <tbody> die Bildlaufleiste erhalten, und die Tabelle selbst durch den Inhalt div ohne Überlauf begrenzt haben?

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; 
 
}

<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>

Quelle

2017-09-11 Alex McMillan

Scheint wie Tabellen haben kein Konzept der Höhe, also uns ein Wrapping div und fügen Sie ein flex-grow stattdessen (Sie verwenden bereits flexbox).

Wichtigste Änderungen:

gewickelt Tisch mit <div class='fill'></div>

css zusätzlich div.content .fill { flex: 1; overflow-y: scroll }

bezogen werden: CSS3 display:table, overflow-y:scroll doesn't work

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; 
 
}

<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>

Quelle

2017-09-11 23:37:23

Brilliant! Vielen Dank.Allerdings wollte ich das '' scrollen (dh: halte die Header statisch), also habe ich es 'overflow-y: hidden;' gemacht und lass das 'overflow-y: scroll;' auf dem tbody übernehmen. Aber danke für die Wrapper-Idee ... Mann HTML/CSS kann manchmal unintuitiv sein. –

@AlexMcMillan yeah css/html verhält sich nicht so, wie Sie es gerne hätten. Sie können auch keine feste Kopfzeile mit dem Gehörlosen '

' haben (so viel ich gerne auch haben würde), es wird einige manipulierte Manipulation erfordern (meistens Javascript, um sicherzustellen, dass ihre Breiten gleich sind). –

Wenn Sie nur drei Spalten verwenden, verwenden Sie stattdessen Spalten? Sie könnten wahrscheinlich einen festen Header mit scrollbaren Körper leichter so manipulieren. https://www.w3schools.com/css/css3_multiple_columns.asp –

Sie haben einen anderen Wert der Höhe des tbody wie

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

zu geben und auch Thead, tbody, tr und td anzuzeigen Zeigen Sie sie mit der Eigenschaft blok an: .table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed { display: block; }

Verwenden Bootstrap, die Sie alow eine einfache und effektive Seite zu machen, es ist einfach zu handhaben:

hier ist ein kompletter ex, die für mich funktioniert:

dies ist der html Datei:

<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>

und dies ist die CSS-Datei:

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; 
}

Quelle

2017-09-11 23:24:29

Aber, Die Höhe der Tabelle ändert sich basierend auf der Bildschirmgröße des Benutzers. –

Wenn Sie das wollen, so wird Bootstrap es für Sie tun, wenn Sie ein festes festes Eigentum der Tabelle hinzufügen möchten –

Verwandte Themen

Scrollable tbody im Raster Layout

Antwort

Verwandte Themen