Poziomo i pionowo reagujący stół z lepkimi/stałymi nagłówkami?

Na stronie w witrynie, którą buduję, wyświetli się tylko tabela. Chcę, aby stół przylegał do krawędzi ekranu, niezależnie od szerokości/wysokości ekranu.Poziomo i pionowo reagujący stół z lepkimi/stałymi nagłówkami?

Ta tabela musi również mieć przyklejone/naprawione nagłówki (tak, że podczas przewijania w dół nagłówki są nadal widoczne), co znajduję komplikuje rzeczy, ponieważ szerokości i wysokości pozornie trzeba ustawić ręcznie.

Musi też być w stanie przewijać się poziomo w przypadku dużej ilości kolumn. Nie chcę, aby wszystkie miały szerokość 10 pikseli, ale sam stół nadal musi przylegać do krawędzi ekranu w miarę zmiany wymiarów.

Działa z utrzymywaniem nagłówków lepkich podczas przewijania użytkownika, ale szerokość i wysokość elementów muszą być ustawione ręcznie, co oznacza, że nie reagują w żaden sposób.

Czy to w ogóle możliwe? Nie jestem przeciwny JavaScriptowi, ale czyste rozwiązanie CSS byłoby nieco preferowane.

(JSFiddle)

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
table { 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
    width: 375px; 
 
    overflow-y: scroll; 
 
    -webkit-overflow-scrolling: touch; 
 
    -webkit-border-horizontal-spacing: 0; 
 
} 
 
th, 
 
td { 
 
    text-align: left; 
 
    padding: 10px 10px; 
 
    width: 105px; 
 
    word-wrap: break-word; 
 
    word-break: break-all; 
 
    -webkit-hyphens: auto; 
 
    hyphens: auto; 
 
} 
 
thead { 
 
    background-color: black; 
 
    color: #fff; 
 
} 
 
thead tr { 
 
    display: block; 
 
    position: relative; 
 
} 
 
tbody { 
 
    display: block; 
 
    overflow: auto; 
 
    height: 300px; 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Longer title for testing</th> 
 
     <th>Color</th> 
 
     <th>Description</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Apple ioeras eionars ienraist eioarn stio enar sotinera oietnar i i i i i i i i i i i i i i i i i i i i i to</td> 
 
     <td>Red aeinrs tienras tienr eiostnnearhstniehrastneihrsaetinh iaroes nte narse itnar einaer ns eanr enrsena ernes netnea rnst sr</td> 
 
     <td>These are red.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Pear</td> 
 
     <td>Green</td> 
 
     <td>These are green.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Grape</td> 
 
     <td>Purple/Green</td> 
 
     <td>These are purple and green.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Orange</td> 
 
     <td>Orange</td> 
 
     <td>These are orange.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Banana</td> 
 
     <td>Yellow</td> 
 
     <td>These are yellow.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Kiwi</td> 
 
     <td>Green</td> 
 
     <td>These are green.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Plum</td> 
 
     <td>Purple</td> 
 
     <td>These are Purple</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Watermelon</td> 
 
     <td>Red</td> 
 
     <td>These are red.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Tomato</td> 
 
     <td>Red</td> 
 
     <td>These are red.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cherry</td> 
 
     <td>Red</td> 
 
     <td>These are red.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cantelope</td> 
 
     <td>Orange</td> 
 
     <td>These are orange inside.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Honeydew</td> 
 
     <td>Green</td> 
 
     <td>These are green inside.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Papaya</td> 
 
     <td>Green</td> 
 
     <td>These are green.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Raspberry</td> 
 
     <td>Red</td> 
 
     <td>These are red.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Blueberry</td> 
 
     <td>Blue</td> 
 
     <td>These are blue.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Mango</td> 
 
     <td>Orange</td> 
 
     <td>These are orange.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Passion Fruit</td> 
 
     <td>Green</td> 
 
     <td>These are green.</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Źródło

2015-08-13 Doug Smith

Jeżeli wysokość ciała i szerokość jest ustawiona na 100% pozwoli to dziecko (tabela), aby wykonać całą stronę.

body{ 
    height: 100%; 
    width: 100%; 
} 

table{ 
    height: 100%; 
    width: 100%; 
}

Źródło

2015-08-14 15:09:46 batroc

proszę [edytuj] więcej informacji. Odpowiedzi tylko na kod są zniechęcane (http://meta.stackexchange.com/questions/196187), ponieważ nie zawierają treści do wyszukania i nie wyjaśniają, dlaczego ktoś powinien "spróbować tego". Staramy się być źródłem wiedzy. – Mogsdad

Wydaje mi się, że nie ma tu znaczenia uczynienie stołu responsywnym. To łatwe. Ale tworzenie nagłówków Horizontally Relatives i Vertically Fixed jest czymś trudnym. –

Czy tego właśnie szukasz?

https://jsfiddle.net/6o1gbq6x/

<style> 
body { 
    margin: 0; 
    padding: 0; 
} 
.table_container { /*responsive container*/ 
    width: 100%; 
    margin: 0 auto; 
    height: 100%; 
    max-height: 300px; 
} 

table { 
    border-collapse: collapse; 
    width: auto; 
    -webkit-overflow-scrolling: touch; 
    -webkit-border-horizontal-spacing: 0; 
} 
th, 
td { 
    text-align: left; 
    padding: 10px 10px; 
    width: 33%; 
    min-width: 100px; 
    word-wrap: break-word; 
    word-break: break-all; 
    -webkit-hyphens: auto; 
    hyphens: auto; 
} 
thead { 
    background-color: black; 
    color: #fff; 
} 
thead tr { 
    display: block; 
    position: relative; 
} 
tbody { 
    display: block; 
    overflow: auto; 
    height: 300px; 
} 
</style> 

<div class="table_container"> 
<table> 
    <thead> 
    <tr> 
     <th>Longer title for testing</th> 
     <th>Color</th> 
     <th>Description</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Apple ioeras eionars ienraist eioarn stio enar sotinera oietnar i i i i i i i i i i i i i i i i i i i i i to</td> 
     <td>Red aeinrs tienras tienr eiostnnearhstniehrastneihrsaetinh iaroes nte narse itnar einaer ns eanr enrsena ernes netnea rnst sr</td> 
     <td>These are red.</td> 
    </tr> 
    <tr> 
     <td>Pear</td> 
     <td>Green</td> 
     <td>These are green.</td> 
    </tr> 
    <tr> 
     <td>Grape</td> 
     <td>Purple/Green</td> 
     <td>These are purple and green.</td> 
    </tr> 
    <tr> 
     <td>Orange</td> 
     <td>Orange</td> 
     <td>These are orange.</td> 
    </tr> 
    <tr> 
     <td>Banana</td> 
     <td>Yellow</td> 
     <td>These are yellow.</td> 
    </tr> 
    <tr> 
     <td>Kiwi</td> 
     <td>Green</td> 
     <td>These are green.</td> 
    </tr> 
    <tr> 
     <td>Plum</td> 
     <td>Purple</td> 
     <td>These are Purple</td> 
    </tr> 
    <tr> 
     <td>Watermelon</td> 
     <td>Red</td> 
     <td>These are red.</td> 
    </tr> 
    <tr> 
     <td>Tomato</td> 
     <td>Red</td> 
     <td>These are red.</td> 
    </tr> 
    <tr> 
     <td>Cherry</td> 
     <td>Red</td> 
     <td>These are red.</td> 
    </tr> 
    <tr> 
     <td>Cantelope</td> 
     <td>Orange</td> 
     <td>These are orange inside.</td> 
    </tr> 
    <tr> 
     <td>Honeydew</td> 
     <td>Green</td> 
     <td>These are green inside.</td> 
    </tr> 
    <tr> 
     <td>Papaya</td> 
     <td>Green</td> 
     <td>These are green.</td> 
    </tr> 
    <tr> 
     <td>Raspberry</td> 
     <td>Red</td> 
     <td>These are red.</td> 
    </tr> 
    <tr> 
     <td>Blueberry</td> 
     <td>Blue</td> 
     <td>These are blue.</td> 
    </tr> 
    <tr> 
     <td>Mango</td> 
     <td>Orange</td> 
     <td>These are orange.</td> 
    </tr> 
    <tr> 
     <td>Passion Fruit</td> 
     <td>Green</td> 
     <td>These are green.</td> 
    </tr> 
    </tbody> 
</table> 
</div>

Jeśli nie, proszę dać mi znać, a ja wyregulować.

Źródło

2015-09-02 00:17:41 Mike

Nagłówki stołów są ustalane pionowo, ale nie w stosunku poziomym. Gdy tabela uzyska niewielką szerokość, a poziomy pasek przewijania jest wyświetlany, zawartość przewija się, a nagłówki są zamrożone. –

Można używać position: fixed w tagu thead (CSS), aby rozwiązać ten nagłówek tabeli na najwyższym i pełnej szerokości ustawić szerokość: 100%

Źródło

2017-07-30 20:29:50

Poziomo i pionowo reagujący stół z lepkimi/stałymi nagłówkami?

Odpowiedz

Powiązane problemy