Comment faire en-tête fixe de table à l'intérieur de défilement div?

Je veux faire de l'en-tête de mon tableau fixe. Le tableau est présent à l'intérieur de la div scrollable. Ci-dessous mon code.

<div id="table-wrapper">
    <div id="table-scroll">
        <table bgcolor="white" border="0" cellpadding="0" cellspacing="0" id="header-fixed" width="100%" overflow="scroll" class="scrollTable">
            <thead>
                <tr>
                    <th>Order ID</th>
                    <th>Order Date</th>
                    <th>Status</th>
                    <th>Vol Number</th>
                    <th>Bonus Paid</th>
                    <th>Reason for no Bonus</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><%=snd.getOrderId()%></td>
                    <td><%=snd.getDateCaptured()%></td>
                    <td><%=snd.getOrderStatus()%></td>
                    <td>Data Not Available</td>
                    <td>Data Not Available</td>
                    <td>Data Not Available</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Ci-dessous est mon CSS, que je suis à l'aide de la ci-dessus div:

#table-wrapper {
    position:relative;
}

#table-scroll {
    height:250px;
    overflow:auto;  
    margin-top:20px;
}

#table-wrapper table {
    width:100%;
}

#table-wrapper table * {
    background:white;
    color:black;
}

#table-wrapper table thead th .text {
    position:absolute;   
    top:-20px;
    z-index:2;
    height:20px;
    width:35%;
    border:1px solid red;
}

Qu'entendez-vous par "faire de l'en-tête de ma table fixe"? Est-il censé être toujours visible malgré le défilement vers le bas?
exactement la ligne du haut de tableau doit toujours visible
Ive juste ajouté une réponse à une question similaire, qui peuvent aider stackoverflow.com/questions/31433833/...

InformationsquelleAutor Rohan | 2013-07-24

32

Comment faire quelque chose comme ça? Je l'ai fait à partir de zéro...

Ce que j'ai fait est utilisé 2 tableaux, l'un pour l'en-tête, qui sera statique toujours, et l'autre de la table rend les cellules, qui, je l'ai enveloppé à l'aide d'un div élément avec une hauteur fixe, et pour activer le défilement, le matin à l'aide overflow-y: auto;

Assurez-vous également que vous utilisez table-layout: fixed; avec une largeur fixe td éléments afin que votre table ne se casse pas quand une chaîne de caractères sans white space est utilisé, afin de briser cette chaîne am à l'aide de word-wrap: break-word;

Démo
```
.wrap {
    width: 352px;
}

.wrap table {
    width: 300px;
    table-layout: fixed;
}

table tr td {
    padding: 5px;
    border: 1px solid #eee;
    width: 100px;
    word-wrap: break-word;
}

table.head tr td {
    background: #eee;
}

.inner_table {
    height: 100px;
    overflow-y: auto;
}

<div class="wrap">
    <table class="head">
        <tr>
            <td>Head 1</td>
            <td>Head 1</td>
            <td>Head 1</td>
        </tr>
    </table>
    <div class="inner_table">
        <table>
        <tr>
            <td>Body 1</td>
            <td>Body 1</td>
            <td>Body 1</td>
        </tr>
        
    </table>
    </div>
</div>
```
- salut.. cela ne fonctionne pas si les colonnes sont disons 40 colonnes.. et le besoin de faire défiler de droite et de gauche.. ainsi que haut et en bas... l'en-tête de colonne doivent être fixés et que trop à l'intérieur d'un div scrollable. quelqu'un a une solution... voir l'article intégral ici: stackoverflow.com/questions/22093319/...
- Vous avez placé statique largeurs sur les colonnes de la table, qui est à peu près l'ensemble du point de l'utilisation de tableaux pour afficher le contenu dans la première place. Ce n'est pas une solution du tout. Pourquoi même pas la peine w/ une table si vous êtes juste avoir des largeurs fixes? Pourquoi ne pas simplement utiliser des divs
- parce que le <table> élément est idéal pour des données tabulaires, dont il semble que l'OP a.
- Mais le seul point à l'aide d'un tableau de données tabulaires est ainsi que le navigateur est chargé de calcul de la largeur des colonnes. Si vous êtes forçant un fixe, vous auriez une meilleure performance avec les divisions. Les Tables ont une grande quantité de rendu de frais généraux. Une bonne solution serait d'avoir toujours la table est rendu comme un tableau, avec le seul changement étant un fixe ligne d'en-tête... Qui, à vrai dire, je n'ai toujours pas trouvé une solution complète pour. D'où la raison pour laquelle je suis ici à la traîne cette réponse 😉
- malheureusement je suis en désaccord. Je pense que la propriété CSS table-layout: fixed; ne trop.
- Si c'est quelque chose comme ceci: jsfiddle.net/n1fg39f7
- ne fonctionne pas si il y a de défilement dans la direction x.
- Oui, parce que l'OP a demandé pour Y faire défiler
InformationsquelleAutor Mr. Alien
4

Certaines de ces réponses semblent inutilement complexe. Faites votre tbody:
```
display: block; height: 300px; overflow-y: auto
```
Puis régler manuellement la largeur de chaque colonne, de sorte que le thead et tbody colonnes sont de la même largeur. Réglage de la table style="table-layout: fixe" peut également être nécessaire.
- Ce serait gâcher les largeurs des colonnes de la table..
InformationsquelleAutor Dwayne
4

À l'aide de position: sticky sur th fera l'affaire.

Remarque: si vous utilisez position: sticky sur thead ou tr, ça ne marchera pas.

https://jsfiddle.net/hrg3tmxj/
- Je ne suis pas sûr de savoir pourquoi cela a été downvoted. Cette solution a fait le travail pour mes besoins avec beaucoup moins de "compromis" que d'autres solutions. Une chose que je note c'est que le th éléments aurez besoin d'une couleur d'arrière-plan.
InformationsquelleAutor Tenzin Nyima

Je pense que vous avez besoin de quelque chose comme cela ?

Comment faire en-tête fixe de table à l'intérieur de défilement div?

.....
<style>
.table{width: 500px;height: 200px;border-collapse:collapse;}
.table-wrap{max-height: 200px;width:100%;overflow-y:auto;overflow-x:hidden;}
.table-dalam{height:300px;width:500px;border-collapse:collapse;}
.td-nya{border-left:1px solid white;border-right:1px solid grey;border-bottom:1px solid    grey;}

</style>

<table class="table">
<thead>
    <tr>
    <th>Judul1</th>
    <th>Judul2</th>
    <th>Judul3</th>
    <th>Judul4</th>
   </tr>
 </thead>
 <tbody>
   <tr>
      <td colspan="4">
      <div class="table-wrap" >
      <table class="table-dalam">
         <tbody>
             <?php foreach(range(1,10) as $i): ?>
                 <tr >
                     <td class="td-nya">td1 </td>
                     <td class="td-nya">td2</td>
                     <td class="td-nya">td2</td>
                     <td class="td-nya">td2</td>
                 </tr> 
            <?php endforeach;?>
        </tbody>
       </table>
     </div>
   </td>
 </tr>
  </tbody>
 </table>

Source

Cela semble bien fonctionner pour les colonnes de largeur fixe. Si votre en-tête des colonnes de largeurs dépend des données dans cette solution ne fonctionne pas très bien. Pourtant, +1 pour l'idée.

InformationsquelleAutor ngakak

1

J'avais besoin de la même chose et cette solution a fonctionné le plus simple et explicite:

http://www.farinspace.com/jquery-scrollable-table-plugin/

Je viens de donner un id à la table, je veux faire défiler et mettre une ligne en Javascript. Ça y est!

Par la façon dont, en premier j'ai aussi pensé que je veux utiliser un div scrollable, mais il n'est pas nécessaire à tous. Vous pouvez utiliser un div et de mettre en elle, mais cette solution ne fonctionne tout simplement ce dont nous avons besoin: les parchemins de la table.

InformationsquelleAutor adamvagyok

C'est mon "béquilles" solution à l'aide de html et css.
Il utilisé 2 tables et largeur fixe de tables et de la table de la cellule

https://jsfiddle.net/babaikawow/s2xyct24/1/

HTML:

  <div class="container">
<table class="table" border = 1; >  <!-- fixed width header -->
<thead >
<tr>
<th class="tbDataId" >№</th>
<th class="tbDataName">Працівник</th>
<th class="tbDataData">Дата</th>
<th class="tbDataData">Дійсно до</th>
<th class="tbDataDiseases">Критерій1</th>
<th class="tbDataDiseases">Критерій2</th>
<th class="tbDataDiseases">Критерій3</th>
<th class="tbDataDiseases">Критерій4</th>
<th class="tbDataDiseases">Критерій5</th>  
</tr>
</thead>  
</table> 
<div class="scrollTable"> <!-- scrolling block -->
<table class="table" border = 1;>
<tbody>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Працівник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Дійсно до</td>
<td class="tbDataDiseases">Критерій1</td>
<td class="tbDataDiseases">Критерій2</td>
<td class="tbDataDiseases">Критерій3</td>
<td class="tbDataDiseases">Критерій4</td>
<td class="tbDataDiseases">Критерій5</td> 
</tr>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Працівник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Дійсно до</td>
<td class="tbDataDiseases">Критерій1</td>
<td class="tbDataDiseases">Критерій2</td>
<td class="tbDataDiseases">Критерій3</td>
<td class="tbDataDiseases">Критерій4</td>
<td class="tbDataDiseases">Критерій5</td> 
</tr>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Працівник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Дійсно до</td>
<td class="tbDataDiseases">Критерій1</td>
<td class="tbDataDiseases">Критерій2</td>
<td class="tbDataDiseases">Критерій3</td>
<td class="tbDataDiseases">Критерій4</td>
<td class="tbDataDiseases">Критерій5</td> 
</tr>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Працівник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Дійсно до</td>
<td class="tbDataDiseases">Критерій1</td>
<td class="tbDataDiseases">Критерій2</td>
<td class="tbDataDiseases">Критерій3</td>
<td class="tbDataDiseases">Критерій4</td>
<td class="tbDataDiseases">Критерій5</td> 
</tr>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Працівник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Дійсно до</td>
<td class="tbDataDiseases">Критерій1</td>
<td class="tbDataDiseases">Критерій2</td>
<td class="tbDataDiseases">Критерій3</td>
<td class="tbDataDiseases">Критерій4</td>
<td class="tbDataDiseases">Критерій5</td> 
</tr>
</tbody>
</table>
</div> 
</div>

CSS:

*{
box-sizing: border-box;
}
.container{
width:1000px;
}
.scrollTable{
overflow: scroll;
overflow-x: hidden;
height: 100px;
} 
table{
margin: 0px!important;
width:983px!important;
border-collapse: collapse; 
}
/*   Styles of the th and td  */
/* Id */
.tbDataId{
width:5%;
}
/* Дата,
Дійсно до */
.tbDataData{
/*width:170px;*/
width: 15%;
}
/* П І Б */
.tbDataName{
width: 15%;
}
/*Критерії */
.tbDataDiseases{
width:10%;
}

InformationsquelleAutor Babaikawow

0

Un Violon aurait été plus utile néanmoins de ce que je comprends, je pense que ce que vous avez besoin est persistant en-têtes, se pencher sur cette

http://css-tricks.com/persistent-headers/

InformationsquelleAutor Sarmad Saleem

Ce code fonctionne formulaire de moi. Inclure l'jquery.js fichier.

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
var headerDivWidth=0;
var contentDivWidth=0;
function fixHeader(){
var contentDivId = "contentDiv";
var headerDivId = "headerDiv";
var header = document.createElement('table');
var headerRow = document.getElementById('tableColumnHeadings'); 
/*Start : Place header table inside <DIV> and place this <DIV> before content table*/
var headerDiv = "<div id='"+headerDivId+"' style='width:500px;overflow-x:hidden;overflow-y:scroll' class='tableColumnHeadings'><table></table></div>";
$(headerRow).wrap(headerDiv);
$("#"+headerDivId).insertBefore("#"+contentDivId);
/*End : Place header table inside <DIV> and place this <DIV> before content table*/
fixColumnWidths(headerDivId,contentDivId);
}
function fixColumnWidths(headerDivId,contentDivId){
/*Start : Place header row cell and content table first row cell inside <DIV>*/ 
var contentFirstRowCells = $('#'+contentDivId+' table tr:first-child td');
for (k = 0; k < contentFirstRowCells.length; k++) {
$( contentFirstRowCells[k] ).wrapInner( "<div ></div>");
}
var headerFirstRowCells = $('#'+headerDivId+' table tr:first-child td');
for (k = 0; k < headerFirstRowCells.length; k++) {
$( headerFirstRowCells[k] ).wrapInner( "<div></div>");
}
/*End : Place header row cell and content table first row cell inside <DIV>*/ 
/*Start : Fix width for columns of header cells and content first ror cells*/
var headerColumns = $('#'+headerDivId+' table tr:first-child td div:first-child');
var contentColumns = $('#'+contentDivId+' table tr:first-child td div:first-child');
for (i = 0; i < contentColumns.length; i++) {
if (i == contentColumns.length - 1) {
contentCellWidth = contentColumns[i].offsetWidth;
}
else {
contentCellWidth = contentColumns[i].offsetWidth;
}
headerCellWidth = headerColumns[i].offsetWidth;
if(contentCellWidth>headerCellWidth){
$(headerColumns[i]).css('width', contentCellWidth+"px");
$(contentColumns[i]).css('width', contentCellWidth+"px");
}else{
$(headerColumns[i]).css('width', headerCellWidth+"px");
$(contentColumns[i]).css('width', headerCellWidth+"px");
}
}
/*End : Fix width for columns of header and columns of content table first row*/
}   
function OnScrollDiv(Scrollablediv) {
document.getElementById('headerDiv').scrollLeft = Scrollablediv.scrollLeft;
}
function radioCount(){
alert(document.form.elements.length);
}   
</script>
<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
th,td
{
padding:5px;
}
</style>
</head>
<body onload="fixHeader();">
<form id="form" name="form">
<div id="contentDiv" style="width:500px;height:100px;overflow:auto;" onscroll="OnScrollDiv(this)">
<table>
<!--tr id="tableColumnHeadings" class="tableColumnHeadings">
<td><div>Firstname</div></td>
<td><div>Lastname</div></td>      
<td><div>Points</div></td>
</tr>
<tr>
<td><div>Jillsddddddddddddddddddddddddddd</div></td>
<td><div>Smith</div></td>     
<td><div>50</div></td>
</tr-->
<tr id="tableColumnHeadings" class="tableColumnHeadings">
<td>&nbsp;</td>
<td>Firstname</td>
<td>Lastname</td>     
<td>Points</td>
</tr>
<tr style="height:0px">
<td></td>
<td></td>
<td></td>     
<td></td>
</tr>
<tr >
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID" onclick="javascript:radioCount();"/></td>
<td>Jillsddddddddddddddddddddddddddd</td>
<td>Smith</td>        
<td>50</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td>Eve</td>
<td>Jackson</td>      
<td>9400000000000000000000000000000</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td>John</td>
<td>Doe</td>      
<td>80</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td><div>Jillsddddddddddddddddddddddddddd</div></td>
<td><div>Smith</div></td>     
<td><div>50</div></td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td>Eve</td>
<td>Jackson</td>      
<td>9400000000000000000000000000000</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td>John</td>
<td>Doe</td>      
<td>80</td>
</tr>
</table>
</div>
</form>
</body>
</html>

InformationsquelleAutor Venugopal

0

utilisation StickyTableHeaders.js pour cela.

En-tête a été transparent . donc, essayez d'ajouter ce css .
```
thead {
border-top: none;
border-bottom: none;
background-color: #FFF;
}
```
InformationsquelleAutor Saajan

Vous devez vous connecter pour publier un commentaire.