Ik wil een HTML-tabel maken met de bovenste rij bevroren (dus wanneer u verticaal naar beneden scrollen, kunt u het altijd zien).
Is er een slimme manier om dit te laten gebeuren zonder JavaScript?
Merk op dat ik de linkerkolom bevroren niet nodig heb.
Antwoord 1, Autoriteit 100%
Dit wordt vaste koptekstrailen genoemd. Er zijn een aantal gedocumenteerde benaderingen:
http://www.imaputz.com/cssstuff/bigfourversion.html
U trekt dit niet effectief zonder JavaScript … vooral als u Cross Browser-ondersteuning wilt.
Er zijn een aantal gotchya’s met elke benadering die u neemt, met name met betrekking tot Cross Browser / Version-ondersteuning.
EDIT:
Zelfs als het niet de kop is die u wilt oplossen, maar de eerste rij gegevens, is het concept nog steeds hetzelfde. Ik was niet 100% waar je naar verwijst.
extra gedachte
Ik werd door mijn bedrijf belast om een oplossing hiervoor te onderzoeken die zou kunnen functioneren in IE7 +, Firefox en Chrome.
Na vele manen van zoeken, proberen, en frustratie, het is echt gekookt tot een fundamenteel probleem. Om de vaste koptekst te verkrijgen, moet u vaste / breedte-kolommen implementeren, omdat de meeste oplossingen met behulp van twee afzonderlijke tabellen, één voor de koptekst die zal zweven en op zijn plaats blijven over de tweede tabel die de gegevens bevat .
//float this one right over second table
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</table>
<table>
//Data
</table>
Een alternatieve benadering die sommigen proberen, is het gebruik van de tbody- en thead-tags, maar dat is ook gebrekkig omdat IE je niet toestaat een schuifbalk op de tbody te plaatsen, wat betekent dat je de hoogte niet kunt beperken (zo stomme IMO).
>
<table>
<thead style="do some stuff to fix its position">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody style="No scrolling allowed here!">
Data here
</tbody>
</table>
Deze aanpak heeft veel problemen, zoals het garanderen van EXACTE pixelbreedtes, omdat tabellen zo schattig zijn dat verschillende browsers pixels anders toewijzen op basis van berekeningen en je gewoon NIET (AFAIK) kunt garanderen dat de distributie in alle gevallen perfect zal zijn. Het wordt overduidelijk als je randen binnen je tabel hebt.
Ik nam een andere benadering en zei schroeftabellen omdat je deze garantie niet kunt geven. Ik gebruikte divs om tabellen na te bootsen. Dit heeft ook problemen met het positioneren van de rijen en kolommen (voornamelijk omdat zwevend problemen heeft, zal het gebruik van in-line blok niet werken voor IE7, dus ik moest echt absolute positionering gebruiken om ze op hun juiste plaats te plaatsen).
Er is iemand die de Slick Grid heeft gemaakt die een zeer vergelijkbare benadering heeft als de mijne en je kunt een goed (zij het complex) voorbeeld gebruiken om dit te bereiken.
https://github.com/6pac/SlickGrid/wiki
Antwoord 2, autoriteit 78%
Ik weet dat er verschillende antwoorden zijn, maar geen van deze heeft me echt geholpen. Ik vond [dit artikel][1] waarin wordt uitgelegd waarom mijn stickyniet werkte zoals verwacht.
In principe kunt u niet gebruiken position: sticky;op <thead>of <tr>elementen. Ze kunnen echter worden gebruikt op <th>.
De minimumcode die ik nodig had om het te laten werken, is als volgt:
table {
text-align: left;
position: relative;
}
th {
background: white;
position: sticky;
top: 0;
}
Met de tabel ingesteld op relatief de <th>kan worden ingesteld op kleverig, met de top op 0
[1]: https://css-tricks.com/position-sticky- en-tabel-headers /
Opmerking: het is noodzakelijk om de tabel in te pakken met een div met max-hoogte:
<div id="managerTable" >
...
</div>
Waar:
#managerTable {
max-height: 500px;
overflow: auto;
}
Antwoord 3, Autoriteit 64%
Volgens Pure CSS-schuifbare tafel met vaste koptekst , schreef ik een DEMO Om de koptekst eenvoudig op te lossen door te instellen overflow:autoNaar het TBody.
table thead tr{
display:block;
}
table th,table td{
width:100px;//fixed width
}
table tbody{
display:block;
height:200px;
overflow:auto;//set tbody to auto
}
Antwoord 4, Autoriteit 48%
Mijn bezorgdheid was niet om de cellen met een vaste breedte te hebben. Die in elk geval niet leken te werken.
Ik vond deze oplossing die lijkt te zijn wat ik nodig heb. Ik post het hier voor anderen die op zoek zijn naar een manier. Bekijk deze viool
Werkend fragment:
html, body{
margin:0;
padding:0;
height:100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top:100px;
left:100px;
width:800px;
box-shadow: 0 0 15px #333;
}
.container {
overflow-y: auto;
height: 160px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div{
border: none;
}<section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<th>
Table attribute name
<div>Table attribute name</div>
</th>
<th>
Value
<div>Value</div>
</th>
<th>
Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
</div>
</section>Antwoord 5, autoriteit 29%
U kunt CSS position: sticky;gebruiken voor de eerste rij van de tabel
MDN-ref:
.table-class tr:first-child>td{
position: sticky;
top: 0;
}
Antwoord 6, autoriteit 5%
u kunt twee div’s gebruiken, één voor de koppen en de andere voor de tabel. gebruik dan
#headings {
position: fixed;
top: 0px;
width: 960px;
}
zoals @ptriek al zei, werkt dit alleen voor kolommen met een vaste breedte.
Antwoord 7, autoriteit 5%
Het is mogelijk om position:fixedop <th>te gebruiken (<th>is de bovenste rij).
Antwoord 8
De Chromatable jQuery-plug-in staat een vaste kop (of bovenste rij) toe met breedtes die percentages toestaan – toegekend, slechts een percentage van 100%.
http://www.chromaloop.com/posts/chromatable-jquery-plugin
Ik kan niet bedenken hoe je dit zou kunnen doen zonder javascript.
update: nieuwe link -> http://www.jquery-plugins.info/chromatable-00012248.htm
Antwoord 9
Ik gebruik dit:
tbody{
overflow-y: auto;
height: 350px;
width: 102%;
}
thead,tbody{
display: block;
}
Ik definieer de kolombreedte met bootstrap css col-md-xx. Zonder de kolombreedte te definiëren, komt de automatische breedte van de niet overeen met de . Het 102%-percentage is omdat je wat sap verliest met de overloop
Antwoord 10
Css zebra-styling gebruiken
Kopieer en plak dit voorbeeld en zie de koptekst vast.
<style>
.zebra tr:nth-child(odd){
background:white;
color:black;
}
.zebra tr:nth-child(even){
background: grey;
color:black;
}
.zebra tr:nth-child(1) {
background:black;
color:yellow;
position: fixed;
margin:-30px 0px 0px 0px;
}
</style>
<DIV id= "stripped_div"
class= "zebra"
style = "
border:solid 1px red;
height:15px;
width:200px;
overflow-x:none;
overflow-y:scroll;
padding:30px 0px 0px 0px;"
>
<table>
<tr >
<td>Name:</td>
<td>Age:</td>
</tr>
<tr >
<td>Peter</td>
<td>10</td>
</tr>
</table>
</DIV>
Let op de bovenste opvulling van 30px in de div-bladeren
ruimte die wordt gebruikt door de 1e rij gestripte gegevens
ie tr: nth-kind (1) dat is “vaste positie”
en geformatteerd aan een marge van -30px