title: Need help using ThemeRoller
body: <p>I'm using <a href="http://www.datatables.net/" rel="nofollow">DataTables</a>
  to dress up a table I'm using to display XML results based on an XSL transformation.  I have everything working from a technical sense (paging, sorting, filtering), but I'm trying to figure out to use a ThemeRoller theme to make it look like they have on their website.  </p>
  
  <p>So far, I have added the following file to my project with its reference:</p>
  
  <pre><code>&lt;link type="text/css" href="css/custom-theme/jquery-ui-1.8.7.custom.css" rel="stylesheet"/&gt;
  </code></pre>
  
  <p>and enabled ThemeRoller themes using the following as per the DataTables website:</p>
  
  <pre><code>$(document).ready(function() {
      $('#mainTable').dataTable( {
          "bJQueryUI": true,
          "sPaginationType": "two_button"
      });
  });
  </code></pre>
  
  <p>The table gets styled, but it doesn't look right with the header rows being too wide and things being on multiple lines that should be on one line.  Any indication as to what I'm doing wrong?  Thanks very much in advance.</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;html&gt;
    &lt;body&gt;
      &lt;head runat="server"&gt;
        &lt;META http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
        &lt;link type="text/css" href="css/custom-theme/jquery-ui-1.8.7.custom.css" rel="stylesheet"&gt;
        &lt;script src="Scripts/jquery-1.4.4.min.js" type="text/javascript"&gt;
        &lt;/script&gt;
        &lt;script src="Scripts/jquery.dataTables.min.js" type="text/javascript"&gt;
        &lt;/script&gt;
        &lt;script type="text/javascript"&gt;
                          $(document).ready(function() {
                              $('#example').dataTable( {
                                  "bJQueryUI": true
                              });
                          });
                      &lt;/script&gt;
      &lt;/head&gt;
      &lt;table cellpadding="0" cellspacing="0" border="0" id="example" class="display"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;
              &lt;h3&gt;Title&lt;/h3&gt;
            &lt;/th&gt;
            &lt;th&gt;
              &lt;h3&gt;URL&lt;/h3&gt;
            &lt;/th&gt;
            &lt;th&gt;
              &lt;h3&gt;Notes&lt;/h3&gt;
            &lt;/th&gt;
            &lt;th&gt;
              &lt;h3&gt;
              &lt;/h3&gt;
            &lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;
              &lt;a href="http://www.roperband.com"&gt;Jesse\'s Article&lt;/a&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;a href="http://www.roperband.com"&gt;http://www.roperband.com&lt;/a&gt;
            &lt;/td&gt;
            &lt;td&gt;Some of Jesse\'s notes&lt;/td&gt;
            &lt;td&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/body&gt;
  &lt;/html&gt;&lt;/span&gt;
  
      &lt;/div&gt;
      &lt;div class="clear"&gt;
      &lt;/div&gt;
      &lt;div class="footer"&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>