Bootstrap tutorial 9 – Tables


https://i.ytimg.com/vi/YnrEGDdJfSk/hqdefault.jpg



In this tutorial I show you how to use tables in Boostrap.

Useful links:
———————————–
Don’t forget to subscribe:
www.youtube.com/QuentinWatt

Follow me on Twitter:
www.twitter.com/QuentinWatt

Follow me on Facebook:
www.facebook.com/quentin.watt

Feel free to donate:
https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=CH68DBULMJ37N
————————————

Original source

29 thoughts on “Bootstrap tutorial 9 – Tables

  • November 10, 2017 at 12:18
    Permalink

    Nice tutorial! Do you know how to allow the table to fit the screen size? So if there is long text, it'll condense into multiple lines instead of one long line and taking up all the space of the page. Appreciate if you can help out.

  • November 10, 2017 at 12:18
    Permalink

    I am working on MVC 5 and there is one table in which I am accessing through a model and view. I have to add few more column and data in that table in sql database after adding everything my table structure on a browser is not right it is outside of a table or panel. How can I fix it? and in future, I may have to add more columns. how can I fix this problem? I have edit and delete link also in that table.

  • November 10, 2017 at 12:18
    Permalink

    You could sell a small Bootstrap reference manual that summarizes your series, purple small minimalistic paperback book reference of the most used topics with images

  • November 10, 2017 at 12:18
    Permalink

    I'm starting to get really confused by these tutorials. Maybe I missed something along the way. Where in the code is the data that can be seen in the table ?

  • November 10, 2017 at 12:18
    Permalink

    a helpful video , does anyone knows how to hide the <tr> line that shows on the table ? i want it without a line break

  • November 10, 2017 at 12:18
    Permalink

    I'm super stomped! I've tried everything (that I know) to make this right and it doesn't work. I have a table going for filmography, I have an h4 before the table. I'm done with this table, now I want to start a new table under the existing one with a h4 under the existing table as well. But my h4 keeps going under my top h4 (which is on top of my table) .How can I get my new h4 under the existing table to start a new table??This might be a total noob question, but I'm seriously stuck.

  • November 10, 2017 at 12:18
    Permalink

    Below is the source code for the table. Like this comment to put it on the top so other students can easily see it..

    <body>
    <div class="container">
    <div class="row">
    <div class="col-xs-12">
    <table>
    <tr>
    <th>
    #
    </th>
    <th>
    First Name
    </th>
    <th>
    Last Name
    </th>
    <th>
    Percentage/Year Mark
    </th>
    </tr>
    <tr>
    <td>1</td>
    <td>Sean</td>
    <td>Pooley</td>
    <td>92%</td>
    </tr>
    <tr>
    <td>2</td>
    <td>Ryan</td>
    <td>Shcwulst</td>
    <td>88%</td>
    </tr>
    <tr>
    <td>3</td>
    <td>Kyle</td>
    <td>Beecham</td>
    <td>86%</td>
    </tr>
    </table>
    </div>

    </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <!– Latest compiled and minified JavaScript –>
    <script src="js/bootstrap.min.js"></script>
    </body>

  • November 10, 2017 at 12:18
    Permalink

    Where is the goddamn table-responsive class?
    came for it, ended up with a headache.
    stop talking too much and go a little straightforward.

  • November 10, 2017 at 12:18
    Permalink

    You usualy strart from the start… or atleast show the whole code, i know nothing about tables so this was kinda annoying since this is what i need and you have been my guide the past two months.. the first down thumb i have ever given you 🙁

  • November 10, 2017 at 12:18
    Permalink

    What about making a schedule, weekly classes for example
    once I put the days across if i resize it the fields go off the browser

  • November 10, 2017 at 12:18
    Permalink

    Um, I copied the table, and then when I added the table class, the line under the <th> row decided that it didn't want to go all the way and stop at the "Last Name" <th> element.

  • November 10, 2017 at 12:18
    Permalink

    Great tutorials Quentin. I always recommend your videos to others. My question, well observation is: I found out last year you could give an element a class and a ID, but apparently you can give multiple classes and perhaps multiple IDs to an element? How much can one add to one element? I found this to be pretty cool, there I said your phrase too lol.

  • November 10, 2017 at 12:18
    Permalink

    Great tutorial.  I did have two questions concerning "table-striped" and "table-hover".

    When you were using "table-striped", I didn't see the zebra effect in your video and in my local setup.  I repeatedly watched that portion of your video over and over, I even tilted my screen to see if maybe I was missing something.  The background is white the whole time.

    When you were using "table-hover", none of the rows highlighted while hovering over them.  I got the same results as well in my local setup.  I ensured that I had all the bootstrap files and javascripts included like you did.

    After further research, I found someone had an issue getting these 2 items to work in bootstrap 3.  The fix I found was to add the following to your 'main.css' file:

    .table-hover tbody tr:hover td
    {
        background-color: Blue;
        color: White;
    }

    .table-striped>tbody>tr:nth-child(odd)>td,
    tr.found{
        background-color:#CECBCB;
    }

  • November 10, 2017 at 12:18
    Permalink

    Hi Quentin, I've been following your tutorial videos for a while and it helps me a lot to improve my coding skill. Thank you so much for your tutorials/lessons.

Leave a Reply