HomeОбразованиеRelated VideosMore From: Angga Risky

How to Create Scrollable Bootstrap Table Tutorial

71 ratings | 10135 views
In this video, you will learn how to create a table inside of divided and you can scroll them. So, if you have a limited section; you don't need to worry about that 'cause you can scroll the table. Follow me ========================================== facebook : @anggariskys twitter: @anggariskys google+: plus.google.com/+anggariskysetiawan instagram: pandastwn
Html code for embedding videos on your blog
Text Comments (25)
Uğurcan Alyüz (3 months ago)
Thanks bro!
Angga Risky (3 months ago)
Welcome, where you from?
killer (7 months ago)
thanks buddy
Dhani Fajar (8 months ago)
bro overflow : scroll; itu bisa langsung buat scroll samping sama kebawah sekaligus apa enggak? sama cara biar <thead>(judul tabel) nya itu posisinya tetap ada, meskipun di scroll sampai kepaling bawah itu gimana ya bro? thank you sblmnya
Dhani Fajar (8 months ago)
Angga Risky lalu untuk yg judul tabel supaya posisinya fixed gmna ya bro? btw ga bisa bro pakai scroll-y atau x ga bisa scroll samping
Angga Risky (8 months ago)
bisa bro pake overflow: scroll-y atau scroll-x
Web Design by Namig (10 months ago)
https://www.youtube.com/watch?v=j67MNODWUKw All about Bootstrap 4 TABLE
gamer player (10 months ago)
thanks bro i was looking for this scrollable
Pj Abing (1 year ago)
HOW To fixed the table header???
Angga Risky (1 year ago)
how?
Pj Abing (1 year ago)
thank you so mucj
Adrián Matesanz (1 year ago)
It worked! thx u so much :D
Remar Padilla (1 year ago)
how to fixed the header and the body is scrollable?thanks alot
Remar Padilla (1 year ago)
can u make it. i will edit it to my code ^^ thanks alot I wait for your next video
Angga Risky (1 year ago)
yes I can but maybe in the video tutorial not at your code :))
Remar Padilla (1 year ago)
its scroll the thead tr th . can u make the thead tr th fixed at the top and the body is just scrolling . thanks alot
Remar Padilla (1 year ago)
heres my table im using materialicess css <div class="card z-depth-5"> <div class="card-title blue" style="padding:3px 4px 3px 4px"><h5>Partner Organization</h5></div> <div class="scroll"> <table class="table bordered centered highlight responsive-table"> <thead> <tr> <th>ID #</th> <th><i class="material-icons prefix">person_pin</i></th> <th>Organization</th> <th>Designation</th> <th><i class="material-icons prefix">contact_phone</i></th> <th><i class="material-icons prefix">mail_outline</i></th> <th>Date of Birth</th> <th>Action</th> </tr> </thead> <tbody> @foreach($partner as $partners) <tr class="grid"> <td>{{ $partners->id }}</td> <td>{{ $partners->last_name . ", " . $partners->first_name . " " . $partners->middle_name . " " }} @if($partners->suffix_name == 'NOTAP') @else {{ $partners->suffix_name }} @endif</td> <td>{{ $partners->organization['organization'] }}</td> <td>{{ $partners->designation['designation'] }}</td> <td>{{ $partners->primary_contact . ', ' .$partners->secondary_contact}}</td> <td>{{ $partners->email }}</td> @if($partners->birthday == '0000-00-00' || $partners->birthday == NULL) <td></td> @else <td>{{ date('m/j/Y', strtotime($partners->birthday)) }}</td> @endif <td><a data-toggle="modal" data-target="partnerModalEdit-{{ $partners->id }}" class="waves-effect waves-light tooltipped" data-position="bottom" data-delay="50" data-tooltip="Edit"><i class="small material-icons">mode_edit</i></a></td> </tr> @include('modalFolder._partnermodalEdit') @endforeach </tbody> </table> </div> </div> .scroll{ height: 420px; overflow-y: auto; }
Angga Risky (1 year ago)
sure. go to your css property and write like this: .navbar-class {position: fixed;}
Colin Griffin (1 year ago)
Thanks.
Peter TETTEH-DOKU (1 year ago)
Great video,HOW can you make vertical scrol bar with boostrap
aaa aaa (1 year ago)
thx boys
buenz01 (2 years ago)
Thanks for that Angga Risky, additional info for me. And dude just one small thing, I know it's not your native language but you need to work out your English skills. Peace out :)
Angga Risky (2 years ago)
Thank you for a feedback, I keep improve my English everyday :) don't forget to subscribe and share this video.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.