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

How to Create Scrollable Bootstrap Table Tutorial

81 ratings | 10853 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 (27)
Your Pal Nurav (1 month ago)
That intro tho
Sujeet Kumar (1 month ago)
how can you fix to top the thead content
Uğurcan Alyüz (5 months ago)
Thanks bro!
BuildWith Angga (5 months ago)
Welcome, where you from?
killer (9 months ago)
thanks buddy
Dhani Fajar (10 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 (10 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
BuildWith Angga (10 months ago)
bisa bro pake overflow: scroll-y atau scroll-x
Web Design by Namig (1 year ago)
https://www.youtube.com/watch?v=j67MNODWUKw All about Bootstrap 4 TABLE
gamer player (1 year ago)
thanks bro i was looking for this scrollable
Pj Abing (1 year ago)
HOW To fixed the table header???
BuildWith Angga (1 year ago)
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
BuildWith Angga (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; }
BuildWith Angga (1 year ago)
sure. go to your css property and write like this: .navbar-class {position: fixed;}
Colin Griffin (1 year ago)
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 :)
BuildWith Angga (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.