title: jQuery DataTable does not resize correctly when page is rendered
body: <p>I've been battling with this problem for a while now. The width of my jQuery DataTable is only displayed correctly after I resize the screen. Watch this screencast to see what happens:</p>
  
  <p><a href="http://screencast.com/t/QY2ZgZp4By" rel="nofollow">http://screencast.com/t/QY2ZgZp4By</a></p>
  
  <p>Here's the scenario:</p>
  
  <p>Using ASP.NET I import data from CSV file and dynamically build a table. The file has a variable number of columns - so it can be any number of columns.</p>
  
  <p>After I produce the table I call the DataTable script to format the table as show below:</p>
  
  <pre><code>        Private Sub CreateInputDataTable()
  
          Dim input As BA.Input = CurrentInput
          Dim inputLines As BA.InputLines = input.Lines
          Dim columnHeaders As BA.InputColumnHeaders = input.ColumnHeaders
          'Dim loadDefItems As BA.InputLoadDefinitionItems = CurrentInputLoadDefinition.DefinitionItems
  
          phInputLoadData.Controls.Clear()
  
          Dim tblRows As Integer = inputLines.Count
          Dim tblCols As Integer = 19 ' Hard coded col number to create sample
          ' Create a Table and set its properties 
          Dim tbl As Table = New Table()
          ' Add the table to the placeholder control
  
          tbl.ID = "tblInputLoad"
          tbl.Attributes.Add("runat", "server")
          tbl.Width = Unit.Percentage(100)
  
          phInputLoadData.Controls.Add(tbl)
  
          'Add dropdown boxes to row headers
          Dim thr As TableHeaderRow = New TableHeaderRow()
          thr.TableSection = TableRowSection.TableHeader
  
          For i As Integer = 0 To tblCols - 1
              Dim cboColName As DropDownList = New DropDownList()
  
              Dim thc As TableHeaderCell = New TableHeaderCell()
              thc.Width = Unit.Pixel(80)
  
              thc.CssClass = "input-def-col-header"
  
              With cboColName
                  .ID = "cboColName_" + i.ToString()
                  .Width = Unit.Pixel(80)
  
                  AddHandler cboColName.PreRender, AddressOf cboColName_PreRender
  
              End With
  
              'Add control to the table cell
              thc.Controls.Add(cboColName)
  
              'Add table cell to the TableRow
              thr.Cells.Add(thc)
          Next
  
          tbl.Rows.Add(thr)
  
          ' Add column headers
          thr = New TableHeaderRow()
          thr.TableSection = TableRowSection.TableHeader
  
          For i As Integer = 0 To tblCols - 1
              Dim thc As TableHeaderCell = New TableHeaderCell()
              thc.Width = Unit.Pixel(80)
              Dim txtBox As TextBox = New TextBox()
  
              txtBox.CssClass = "input-file-col-header"
              txtBox.Text = columnHeaders(i).ColumnHeaderName
              txtBox.Width = Unit.Pixel(80)
              ' Add the control to the TableCell
              thc.Controls.Add(txtBox)
              ' Add the TableCell to the TableRow
              thr.Cells.Add(thc)
          Next
  
          tbl.Rows.Add(thr)
  
          Dim tr As TableRow = New TableRow
          tr.TableSection = TableRowSection.TableBody
  
          ' Now iterate through input lines and add controls 
          For i As Integer = 0 To tblRows - 1
              tr = New TableRow()
  
              For j As Integer = 0 To tblCols - 1
                  Dim tc As TableCell = New TableCell()
                  tc.Width = Unit.Pixel(80)
                  Dim txtBox As TextBox = New TextBox()
                  txtBox.Width = Unit.Pixel(80)
                  txtBox.Text = inputLines(i).Items(j).Value
  
                  If inputLines(i).Items(j).ItemType &lt;&gt; BudgetAllocations.InputDefinitionColumnType.Data Then
                      txtBox.CssClass = "input-file-frozen-left-cols"
                  End If
  
                  ' Add the control to the TableCell
                  tc.Controls.Add(txtBox)
                  ' Add the TableCell to the TableRow
                  tr.Cells.Add(tc)
              Next j
  
              ' Add the TableRow to the Table
              tbl.Rows.Add(tr)
          Next i
  
          ClientScript.RegisterClientScriptBlock(Me.GetType(), "FormatInputTable", _
                "$(document).ready(function() {FormatInputTable();});", True)
  
      End Sub
  </code></pre>
  
  <p>The table is inserted into a ASP.NET placeholder as show below:</p>
  
  <pre><code>  &lt;div id="div-input-load-cont" style="float: left; width: 70%; margin-top: 5px; height: 350px"&gt;
      &lt;asp:PlaceHolder ID="phInputLoadData" runat="server" EnableViewState="False"&gt;&lt;/asp:PlaceHolder&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>And here is the script to format the table:</p>
  
  <pre><code>    function FormatInputTable() {
    var oTable = $('#ctl00_MainContent_tblInputLoad').dataTable({
      "bJQueryUI": false,
      "sScrollY": "300px",
      "sScrollX": "100%",
      "sScrollXInner": "50%",
      "bScrollCollapse": true,
      "bPaginate": false,
      "bRetrieve": false,
      "bFilter": false,
      "bAutoWidth": false
    });
    new FixedColumns(oTable, {
      "iLeftColumns": 2,
      "iLeftWidth": 170,
      "bAutoWidth": false
    });
  };
  </code></pre>
  
  <p>My problem: when the HTML page is rendered my entire right-hand-side container floats to the left due to the width of the table. In this demo I set the number of columns to 19. However, when I minimize the screen everything is displayed correctly the way it is meant to be.</p>
  
  <p>My question: what do I do to make sure the reformatted datatable is shown correctly, instead of floating left? Any help would be greatly appreciated.</p>