Ruchomy opis tabeli

pytanie zadane 8 sierpnia 2019 w HTML i CSS przez michal_php Stary wyjadacz (13,700 p.)

Cześć.

Zrobiłem sobie tabele , która po zjechaniu niżej przyczepia się na stałe górna belka z opisem kolumn.Lecz przyznam ,że nie umiem sobie poradzić ponieważ po dodaniu w css posision fixed wszystko się rozwala i traci swój kształt:

Czy da się jakoś to rozłożyć aby głowa kolumny była w normalnej pozycji ?

1 odpowiedź

odpowiedź 8 sierpnia 2019 przez lapa19904 Stary wyjadacz (11,560 p.)

Wszystko się da, wrzuć code na codepen.io to Ci pomogę.

komentarz 8 sierpnia 2019 przez michal_php Stary wyjadacz (13,700 p.)

Dziękuje z góry za pomoc mój kod:

https://codepen.io/mich_php/pen/jgxEMM

Dodam ,że js jest po to aby scrollowaniu stworzyć właśnie fixed w css.W css to to odpowiada ,że jest fixed :

.menu-table-fixed {
    position: fixed;
    top: 0px;
    background-color: #E9E9E9;
    width: 100%;
}

komentarz 8 sierpnia 2019 przez lapa19904 Stary wyjadacz (11,560 p.)

Widzę że robisz to na bootstrapie. Najpiej będzie dodać klasę "row" dla <tr> w <thead> i poszczególnym <th> nadać klasy "col-2" itp.

Po co zapisujesz w css kilka razy body, kilka razy table i kilka innych?

Zapisujesz raz i stylujesz w klamrach bez konieczności powielania tego samego, chyba że musisz zapisać coś w media-queries ale widzę że nie piszesz tak.

komentarz 8 sierpnia 2019 przez michal_php Stary wyjadacz (13,700 p.)

Po dodaniu row w thead robi się coś dziwnego :

<row>
                </row>
<table class="table table-striped">
                <thead class="menu-table">
                    <tr>
                        <th scope="col" class="col-2 nameTable1non">
                            <p>Nazwa</p>
                            <i onclick="clearFind()" class="cancel-find"><span class="icon-cancel-1"></span></i>
                            <input id="namesubstance" class="seartchSubstance" placeholder="szukaj substancji po nazwie">
                            <a onclick="findsubstance()" class="seartchName" type="button">szukaj</a></th>
                        <th class="col-2 dateTable1non" scope="col">Data utworzenia</th>
                        <th class="col-2 suppilerTablenon" scope="col">Dostawca</th>
                        <th class="col-2 generat" scope="col">Generuj Etykiete</th>
                    </tr>
                </thead>
                
                    <tbody id="find">
                     
                                        </tbody>
            </table>

Wywala tego row poza tabele