Applying styles to tables with Twitter Bootstrap

Question

Does anyone know if it is possible to apply styles on tables with Twitter Bootstrap  I can see some table examples in some older tutorials but not on the Bootstrap site itself    I ve tried to set it up but the tables in my page have almost no styling applied to them    lt table gt       lt thead gt           lt tr gt               lt th gt   lt  th gt               lt th gt First Name lt  th gt               lt th gt Last Name lt  th gt               lt th gt Language lt  th gt           lt  tr gt       lt  thead gt       lt tbody gt           lt tr gt               lt td gt 1 lt  td gt               lt td gt Some lt  td gt               lt td gt One lt  td gt               lt td gt English lt  td gt           lt  tr gt           lt tr gt               lt td gt 2 lt  td gt               lt td gt Joe lt  td gt               lt td gt Sixpack lt  td gt               lt td gt English lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt    What classes do I need to apply

User · Answer

bootstrap provides various classes for table    lt table class  table  gt  lt  table gt    lt table class  table table-bordered  gt  lt  table gt    lt table class  table table-hover  gt  lt  table gt    lt table class  table table-condensed  gt  lt  table gt    lt table class  table table-responsive  gt  lt  table gt

User · Answer

Bootstrap offers various table styles  Have a look at Base CSS - Tables for documentation and examples   The following style gives great looking tables    lt table class  table table-striped table-bordered table-condensed  gt         lt  table gt

User · Answer

You can also apply TR classes  info  error  warning  or success

User · Answer

you can Add contextual classes to every single row as follows    lt tr class  table-success  gt  lt  tr gt   lt tr class  table-error  gt  lt  tr gt   lt tr class  table-warning  gt  lt  tr gt   lt tr class  table-info  gt  lt  tr gt   lt tr class  table-danger  gt  lt  tr gt    You can also add them to table data same as above  You can set your table size by setting classes as table-sm and so on   You can add custom classes and add your own styling    lt table class  table  gt     lt thead style    color red background-color blue  gt       lt tr gt         lt th gt  lt  th gt         lt th gt First Name lt  th gt         lt th gt Last Name lt  th gt       lt  tr gt     lt  thead gt     lt tbody gt       lt tr gt            lt td gt Asdf lt  td gt         lt td gt qwerty lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt    This way you can add custom styling  I have showed inline styling just for example how it works  you can add classes and call them in your css as well

User · Answer

Twitter bootstrap tables can be styled and well designed  You can style your table just adding some classes on your table and it   ll look nice   You might use it on your data reports  showing information  etc    You can use    basic table Striped rows Bordered table Hover rows Condensed table Contextual classes Responsive tables   Striped rows Table         lt table class  table table-striped  width  647  gt       lt thead gt       lt tr gt       lt th gt   lt  th gt       lt th gt Name lt  th gt       lt th gt Address lt  th gt       lt th gt mail lt  th gt       lt  tr gt       lt  thead gt       lt tbody gt       lt tr gt       lt td gt 1 lt  td gt       lt td gt Thomas bell lt  td gt       lt td gt Brick lane  London lt  td gt       lt td gt thomas yahoo com lt  td gt       lt  tr gt       lt tr gt       lt td height  29  gt 2 lt  td gt       lt td gt Yan Chapel lt  td gt       lt td gt Toronto Australia lt  td gt       lt td gt Yan yahoo com lt  td gt       lt  tr gt       lt tr gt       lt td gt 3 lt  td gt       lt td gt Pit Sampras lt  td gt       lt td gt Berlin  Germany lt  td gt       lt td gt Pit  yahoo com lt  td gt       lt  tr gt       lt  tbody gt       lt  table gt    Condensed table    Compacting a table you need to add class class    table table-condensed             lt table class  table table-condensed  width  647  gt       lt thead gt       lt tr gt       lt th gt   lt  th gt       lt th gt Sample Name lt  th gt       lt th gt Address lt  th gt       lt th gt Mail lt  th gt       lt  tr gt       lt  thead gt       lt tbody gt       lt tr gt       lt td gt 1 lt  td gt       lt td gt Thomas bell lt  td gt       lt td gt Brick lane  London lt  td gt       lt td gt thomas yahoo com lt  td gt       lt  tr gt       lt tr gt       lt td height  29  gt 2 lt  td gt       lt td gt Yan Chapel lt  td gt       lt td gt Toronto Australia lt  td gt       lt td gt Yan yahoo com lt  td gt       lt  tr gt       lt tr gt       lt td gt 3 lt  td gt       lt td gt Pit Sampras lt  td gt       lt td gt Berlin  Germany lt  td gt       lt td gt Pit  yahoo com lt  td gt       lt  tr gt       lt tr gt       lt td gt  lt  td gt       lt td colspan  3  align  center  gt  lt  td gt       lt  tr gt       lt  tbody gt       lt  table gt    Ref   http   twitterbootstrap org twitter-bootstrap-table-example-tutorial

User · Answer

Just another good looking table  I added  table-hover  class because it gives a nice hovering effect       lt h3 gt NATO Phonetic Alphabet lt  h3 gt          lt table class  table table-striped table-bordered table-condensed table-hover  gt      lt thead gt       lt tr gt            lt th gt Letter lt  th gt           lt th gt Phonetic Letter lt  th gt        lt  tr gt       lt  thead gt     lt tr gt       lt th gt A lt  th gt       lt th gt Alpha lt  th gt      lt  tr gt     lt tr gt       lt td gt B lt  td gt       lt td gt Bravo lt  td gt      lt  tr gt     lt tr gt       lt td gt C lt  td gt       lt td gt Charlie lt  td gt      lt  tr gt    lt  table gt

[twitter-bootstrap] Applying styles to tables with Twitter Bootstrap

Examples related to twitter-bootstrap