title: jQuery Datatable Resizing Problems
body: <p>I have a problem with my Jquery Datatable. Basically I want to have a datatable like that: <a href="http://www.datatables.net/examples/basic_init/themes.html" rel="nofollow noreferrer">Data table example</a></p>
  
  <p>I imported these at my code:</p>
  
  <pre><code>&lt;%@ page contentType="text/html;charset=UTF-8" language="java" %&gt;
  &lt;%@ taglib prefix="s" uri="/struts-tags" %&gt;
  &lt;html&gt;
  &lt;head&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,
              "sPaginationType": "full_numbers",
              "oLanguage": {
              "sLengthMenu": "Sayfada _MENU_ kayıt göster",
              "sZeroRecords": "Kayıt bulunamadı",
              "sInfo": "_TOTAL_ kayıttan _START_ - _END_ arası  gösteriliyor",
              "sInfoEmpty": "toplam 0 kayıt arasında 0 - 0 arası kayıt gösteriliyor",
              "sInfoFiltered": "(toplam _MAX_ kayıt arasında filtreleme yapıldı)"
          }
          });
          $("#submit").click(function(event) {
              var course = $("#courses :selected").val();
              var instructor = $("#instructors :selected").val();
              $.ajax({
                  type:'POST',
                  url: 'assignCourse.action',
                  data: { pageAction:"assignCourse" , courseIdStr: course, instructorIdStr: instructor },
                  success: function(data) {
                      if (data == null || data == '') {
                          alert('Ders Atama İşlemi Başarıyla Gerçekleştirildi!');
                      } else {
                          alert(data);
                      }
                  },
                  error: function(data) {
                      alert('İşlem Gerçekleştirilirken Hata Oluştu!');
                  }
              });
          });
      });
  &lt;/script&gt;
  &lt;title&gt;Ders Atama Modülü&lt;/title&gt;&lt;/head&gt;
  &lt;link href="CSS/style.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="CSS/custom-theme/jquery-ui-1.8.9.custom.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="CSS/demo_page.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="CSS/demo_table_jui.css" rel="stylesheet" type="text/css" /&gt;
  &lt;body&gt;
  &lt;h1&gt;Ders Atama Modülü&lt;/h1&gt;
  &lt;/body&gt;
  &lt;table&gt;
  &lt;tr&gt;
      &lt;td class="oyun_yazari" height="30" width="20"&gt;Ders:&lt;/td&gt;
      &lt;td width="200"&gt;
          &lt;div&gt;
              &lt;select id="courses"&gt;
              &lt;s:iterator value="courseGroups" status="stat"&gt;
               &lt;option value="&lt;s:property value='courseGroupId'/&gt;"&gt;&lt;s:property value='course.name'/&gt; - &lt;s:property value='groupNumber'/&gt;. grup&lt;/option&gt;
              &lt;/s:iterator&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/td&gt;
      &lt;td class="oyun_yazari" height="30" width="20"&gt;Akademisyen:&lt;/td&gt;
      &lt;td width="274"&gt;
          &lt;div&gt;
              &lt;select id="instructors"&gt;
              &lt;s:iterator value="instructors" status="stat"&gt;
                  &lt;option value="&lt;s:property value='instructorId'/&gt;"&gt;&lt;s:property value='instructorName'/&gt; &lt;s:property value='instructorSurname'/&gt;&lt;/option&gt;
              &lt;/s:iterator&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;
          &lt;div&gt;
              &lt;input type="submit" name="submit" id="submit" value="Ata"/&gt;
          &lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table id=example&gt;
  &lt;thead&gt;
  &lt;tr&gt;
  &lt;th&gt;Ders Adı&lt;/th&gt;&lt;th&gt;Grup&lt;/th&gt;&lt;th&gt;Akademisyen&lt;/th&gt;&lt;th&gt;Sil&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tfoot&gt;
  &lt;tr&gt;
  &lt;th&gt;Ders Adı&lt;/th&gt;&lt;th&gt;Grup &lt;/th&gt;&lt;th&gt;Akademisyen&lt;/th&gt;&lt;th&gt;Sil &lt;/th&gt;
  &lt;/tr&gt;
  &lt;/tfoot&gt;
  &lt;tbody&gt;
      &lt;s:iterator value="assignedInstructors" status="stat"&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;s:property value='courseGroup.course.name'/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;s:property value='courseGroup.groupNumber'/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;s:property value='instructor.instructorName'/&gt; &lt;s:property value='instructor.instructorSurname'/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="checkbox"/&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/s:iterator&gt;
      &lt;!--
      &lt;tr&gt;
          &lt;td&gt;&lt;div&gt;&lt;input type="submit" name="sil" id="sil" value=" Seçili Atanmış Dersleri Sil" /&gt;&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      --&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>style.css is mine, others are taken from datatable api and jquery css codes.</p>
  
  <p>When I run the program I get a page like these: <img src="https://i.stack.imgur.com/H1mt2.jpg" alt="screenshot">
  Ps: My page is in an iframe.</p>
  
  <p>Thanks for your help.</p>