jQuery UI themes and HTML tables

Question

Is there any way to theme an HTML table  CSS  with using the jQuery CSS themes   All of my components look like they belong together except for my HTML table which looks different

User · Answer

I ve got a one liner to make HTML Tables look BootStrapped    lt table class  table table-striped table-bordered table-hover  gt    The theme suits other controls and it supports alternate row highlighting

User · Answer

dochoffiday s answer is a great starting point  but for me it did not cut it  the CSS part needed a buff  so I made a modified version with several improvements   See it in action  then come back for the description   JavaScript   function             fn styleTable   function  options            var defaults                 css   ui-styled-table                     options     extend defaults  options            return this each function                   this     this                this addClass options css                 this on  mouseover mouseout    tbody tr   function  event                      this  children   toggleClass  ui-state-hover                                                  event type     mouseover                                  this find  th   addClass  ui-state-default                 this find  td   addClass  ui-widget-content                 this find  tr last-child   addClass  last-child                          jQuery     Differences with the original version    the default CSS class has been changed to ui-styled-table  it sounds more consistent  the  live call was replaced with the recommended  on for jQuery 1 7 upwards the explicit conditional has been replaced by  toggleClass  a terser equivalent  code that sets the misleadingly-named CSS class first on table cells has been removed the code that dynamically adds  last-child to the last table row is necessary to fix a visual glitch on Internet nbsp Explorer nbsp 7 and Internet nbsp Explorer nbsp 8  for browsers that support  last-child it is not necessary   CSS     Internet Explorer 7  setting  separate  results in bad visuals  all other browsers work fine with either value        If set to  separate   then this rule is also needed to prevent double vertical borders on hover  table ui-styled-table tr     th  table ui-styled-table tr     td    border-left-width  0px  important       table ui-styled-table   border-collapse  collapse        Undo the  bolding  that jQuery UI theme may cause on hovered elements    Internet Explorer 7  does not support  inherit   so use a MS proprietary expression along with an Internet Explorer  lt   7 targeting hack         to make the visuals consistent across all supported browsers    table ui-styled-table td ui-state-hover       font-weight  inherit       font-weight  expression this parentNode currentStyle  fontWeight           Initally remove bottom border for all cells     table ui-styled-table th  table ui-styled-table td   border-bottom-width  0px  important        Hovered-row cells should show bottom border  will be highlighted     table ui-styled-table tbody tr hover th  table ui-styled-table tbody tr hover td   border-bottom-width  1px  important        Remove top border if the above row is being hovered to prevent double horizontal borders     table ui-styled-table tbody tr hover   tr th  table ui-styled-table tbody tr hover   tr td   border-top-width  0px  important        Last-row cells should always show bottom border  not necessarily highlighted if not hovered         Internet Explorer 7  Internet Explorer 8  selector dependent on CSS classes because of no support for  last-child    table ui-styled-table tbody tr last-child th  table ui-styled-table tbody tr last-child td   border-bottom-width  1px  important        Last-row cells should always show bottom border  not necessarily highlighted if not hovered         Internet Explorer 8 BUG  if these  unsupported  selectors are added to a rule  other selectors for that rule will stop working as well        Internet Explorer 9 and later  Firefox  Chrome  make sure the visuals are working even without the CSS classes crutch     table ui-styled-table tbody tr last-child th  table ui-styled-table tbody tr last-child td   border-bottom-width  1px  important      Notes  I have tested this on Internet nbsp Explorer nbsp 7 and upwards  Firefox 11 and Google Chrome 18 and confirmed that it works perfectly  I have not tested reasonably earlier versions of Firefox and Chrome or any version of Opera  however  those browsers are well-known for good CSS support and since we are not using any bleeding-edge functionality here I assume it will work just fine there as well   If you are not interested in Internet nbsp Explorer nbsp 7 support there is one CSS attribute  introduced with the star hack  that can go   If you are not interested in Internet nbsp Explorer nbsp 8 support either  the CSS and JavaScript related to adding and targeting the last-child CSS class can go as well

User · Answer

Why noy just use the theme styles in the table  i e    lt table gt     lt thead class  ui-widget-header  gt       lt tr gt         lt th gt Id lt  th gt         lt th gt Description lt  th gt       lt  td gt     lt  thead gt     lt tbody class  ui-widget-content  gt       lt tr gt         lt td gt     lt  td gt         lt td gt     lt  td gt       lt  tr gt                             lt  tbody gt   lt  table gt    And you don t need to use any code

User · Answer

There are a bunch of resources out there   Plugins with ThemeRoller support   jqGrid  DataTables net  UPDATE   Here is something I put together that will style the table    lt script type  text javascript  gt        function                 fn styleTable   function  options                var defaults                     css   styleTable                             options     extend defaults  options                return this each function                       input     this                   input addClass options css                    input find  tr   live  mouseover mouseout   function  event                        if  event type     mouseover                               this  children  td   addClass  ui-state-hover                          else                             this  children  td   removeClass  ui-state-hover                                                               input find  th   addClass  ui-state-default                    input find  td   addClass  ui-widget-content                     input find  tr   each function                            this  children  td not  first    addClass  first                          this  children  th not  first    addClass  first                                                          jQuery          document  ready function                  Table1   styleTable              lt  script gt    lt table id  Table1  class  full  gt       lt tr gt           lt th gt one lt  th gt           lt th gt two lt  th gt       lt  tr gt       lt tr gt           lt td gt 1 lt  td gt           lt td gt 2 lt  td gt       lt  tr gt       lt tr gt           lt td gt 1 lt  td gt           lt td gt 2 lt  td gt       lt  tr gt   lt  table gt    The CSS    styleTable   border-collapse  separate     styleTable TD   font-weight  normal  important  padding   4em  border-top-width  0px  important     styleTable TH   text-align  center  padding   8em  4em     styleTable TD first   styleTable TH first   border-left-width  0px  important

[html] jQuery UI themes and HTML tables

Examples related to html

Examples related to jquery-ui

Examples related to html-table

Examples related to themes

Examples related to themeroller