Ustalony nagłówek typu Flexbox, zawartość przewijana do oznaczenia tabeli

Używam tabeli danych, dla której używam tradycyjnego znacznika tabeli, ale chcę, aby mój start był od strony gdzieś na stronie i aby mój nagłówek tabeli został poprawiony gdzie zaczyna się i ciało tabela powinna przewijać poprzez pozostałą stronę wysokość
pokazuję mały przykład tutaj

https://codepen.io/avreddy/pen/eyYBdB?editors=1100
Ustalony nagłówek typu Flexbox, zawartość przewijana do oznaczenia tabeli

.datatable{ 
 
    width: 50%; 
 
    border-collapse: collapse; 
 
} 
 
td{ 
 
    text-align: center; 
 
    border: 1px solid; 
 
    padding:5px; 
 
}

<body> 
 
    <div class="somecontent"> 
 
    <h4>Some Content</h4><h4>Some Content</h4><h4>Some Content</h4> 
 
    </div> 
 
    <table class="datatable"> 
 
    <thead> 
 
     <tr> 
 
     <th>col1</th> 
 
     <th>col2</th> 
 
     <th>col3</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</body>

Wiem, że możemy dostać od schematu flexbox reagującego tabeli, ale moim ograniczeniem jest to muszę używać Tradycyjny stół znaczników więc jeśli mi powiedzieć, czy jest jakiś inny sposób niż schematu flexbox reagującego tabeli
Dziękuję

Źródło

2017-12-12 Aravind Reddy

https://stackoverflow.com/questions/4709390/table-header-to-stay-fixed-at-the-top-when-user-scrolls-it-out-of-view-with-jque –

http : //jsfiddle.net/andrewwhitaker/fj8wM/ –

Scrollable table + poprawione triki nagłówka nie działają z automatycznymi szerokościami kolumn. Dzieje się tak dlatego, że zmieniają właściwość wyświetlania elementu tbody, który tworzy nową (anonimową) tabelę o różnych szerokościach kolumn.

Najlepszym rozwiązaniem, jakie mogę wymyślić, jest utworzenie kopii tabeli (tak, aby obie miały identyczną zawartość, a zatem identyczne szerokości kolumn) i manipulowanie nimi niezależnie.

W poniższym przykładzie, używam jQuery utworzyć kopię tabeli i visibility: collapse ukryć nagłówek tabeli i ciała:

$(function() { 
 
    $("#button-1").one("click", function() { 
 
    $(".datatable").clone().insertAfter(".datatable"); 
 
    $(".datatable").eq(0).addClass("tablehead"); 
 
    $(".datatable").eq(1).addClass("tablebody"); 
 
    }); 
 
});

/* full height */ 
 
html { height: 100%; } 
 
body { height: 100%; margin: 0; padding: 0; font: medium monospace; } 
 

 
/* make last item scrollable and occupy available height */ 
 
#wrapper { height: 100%; display: flex; flex-direction: column; overflow-y: hidden; } 
 
#wrapper > :last-child { display: block; flex: 1; overflow-y: auto; } 
 

 
/* make thead and tbody collapse when JavaScript adds the classes */ 
 
.datatable.tablehead tbody { visibility: collapse; } 
 
.datatable.tablebody thead { visibility: collapse; } 
 

 
/* beautify */ 
 
.datatable { border-collapse: collapse; } 
 
.datatable th { border: 1px solid; background-color: #CCC; } 
 
.datatable td { border: 1px solid; padding: 5px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<!-- 
 
Notes: 
 

 
1) Using a wrapper div instead of body because third party scripts 
 
often append elements to body element breaking our flex model 
 

 
2) Width of second column is determined by thead > 1st row > 2nd column 
 
while width of third column is determined by tbody > 1st row > 3rd column 
 

 
3) If JavaScript fails the result is still usable 
 
--> 
 

 
<div id="wrapper"> 
 
    <div> 
 
    <h4>Some Content</h4> 
 
    <h4>Some Content</h4> 
 
    <p><button type="button" id="button-1">Convert to fixed header</button></p> 
 
    </div> 
 
    <table class="datatable"> 
 
    <thead> 
 
     <tr> 
 
     <th>col 1</th> 
 
     <th>col 2 (wide header)</th> 
 
     <th>col 3</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3 (wide content)</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Zauważ, że visibility: collapse nie jest prawidłowo wdrożone we wszystkich przeglądarki. Alternatywnym rozwiązaniem jest zawijanie dwóch tabel wewnątrz div: stała wysokość div dla tabeli nagłówków, przewijany div dla tabeli ciała. Ale musisz ustawić wysokość nagłówka.

Źródło

2017-12-19 13:33:04

nie można użyć wyświetlacza flex do datatable, ponieważ zakłóci to układ tabeli widać dzieci tabeli nie są wyrównane zgodnie z tabelą nagłówek z powodu tego elastycznego wyświetlacza tylko –

@AravindReddy tak jest to znany problem. Obejście polega na określeniu stałej szerokości% lub px w każdej kolumnie. –

@AravindReddy zobacz poprawioną odpowiedź. –

Try position: sticky dla twojego thead.

Musisz zastosować go do th, aby działał we wszystkich przeglądarkach.

thead th { 
    position: sticky;   // Sticky makes it, well, sticky 
    top: 0px;     // At which offset it should become sticky 
    background-color: #fff;  // Otherwise the th is transparent 
}

Codepen

Żeby było lepkie od jego aktualnej pozycji, można użyć trochę javascript:

let topOffset = document.getElementById("datatable").offsetTop; 
let elementList = document.querySelectorAll('.datatable thead th'); 

for (i = 0; i < elementList.length; i++) { 
    elementList[i].style.top = topOffset + 'px'; 
}

To może wyglądać teraz trochę dziwne w piórze (nakładanie/przezroczystość), ale kiedy mówisz, że zawartość jest powyżej thead (nagłówek, alertbox, ..), po prostu zastosuj wartość wyższą niż tabela i powinien wyglądać dobrze.

Obecnie pracuję nad witryną ze stołem pełnoekranowym, lepkim nagłówkiem i blokiem o zmiennej wysokości nad nim, i to jest to, czego używam (chociaż przesunięcie jest obliczane trochę inaczej z AngularJS).

Codepen

Źródło

2017-12-19 12:38:53

Wiem, że to może zadziałać, jeśli znasz przesunięcie górne, ale moje pytanie brzmi: nie wiem, ile miejsca zajmie najlepsza zawartość Chcę, żeby thead trzymał się tam, gdzie się zaczyna –

Ah, I ' ve zaktualizowałem moją odpowiedź. –

Tak, ja też to wiem i ja też próbowałem, ale chodzi przede wszystkim o ładowanie tabel, a ładowanie zawartości jest późniejsze, ponieważ używam różnych kontrolerów dla obu, więc jeśli użyję kodu Java, o którym wspomniałeś, zajmie on najwyższą wartość przed ładuje zawartość nagłówka, dlatego jest bezużyteczny –

.datatable{ 
 
    width: 50%; 
 
    border-collapse: collapse; 
 
} 
 

 
/*this code is added to fix header at the top of the screen*/ 
 

 
thead th{ 
 
    position: sticky; /*stick the element*/ 
 
    top: 0px; 
 
    background: grey; 
 
} 
 
td{ 
 
    text-align: center; 
 
    border: 1px solid; 
 
    padding:5px; 
 
}

<body> 
 
    <div class="somecontent"> 
 
    <h4>Some Content</h4><h4>Some Content</h4><h4>Some Content</h4> 
 
    </div> 
 
    <table class="datatable"> 
 
    <thead> 
 
     <tr> 
 
     <th>col1</th> 
 
     <th>col2</th> 
 
     <th>col3</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr><tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</body>

chcesz coś jak ten cel będzie lepki na górze strony.

Źródło

2017-12-19 12:57:38

Ustalony nagłówek typu Flexbox, zawartość przewijana do oznaczenia tabeli

Odpowiedz

Powiązane problemy