D4mations.com

Bootstrap tutorial 9 – Tables

[ad_1]
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

d4mer

,
, , , , , , , , , , , , ,

29 responses to “Bootstrap tutorial 9 – Tables”

  1. 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.

  2. 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.

  11. 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.

  13. 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>

  19. 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 🙁

  23. 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.

  24. 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;
    }

Leave a Reply