jQuery DataTable在頁面呈現時無法正確調整大小

Question

我一直在與這個問題爭鬥了一段時間。調整屏幕大小後，我的jQuery DataTable的寬度才能正確顯示。觀看此截屏，看看會發生什麼：

http://screencast.com/t/QY2ZgZp4By

這裏的情景：

使用ASP.NET我從CSV文件導入數據，並動態地構建一個表。該文件具有可變數量的列 - 因此它可以是任意數量的列。

我生產後的表我調用DataTable腳本表格格式，如下所示：

 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 <> 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 

表插入ASP.NET佔位符，如下所示：

<div id="div-input-load-cont" style="float: left; width: 70%; margin-top: 5px; height: 350px"> 
    <asp:PlaceHolder ID="phInputLoadData" runat="server" EnableViewState="False"></asp:PlaceHolder> 
    </div> 

這裏是格式表的腳本：

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 
    }); 
}; 

我的問題：當HTML pag由於桌子的寬度，我的整個右手側容器浮在左邊。在這個演示中，我將列數設置爲19.但是，當我最小化屏幕時，所有內容都按照它的意思來正確顯示。

我的問題：我該怎麼做，以確保重新格式化的數據表格顯示正確，而不是向左浮動？任何幫助將不勝感激。

Answer 1

清除float:left添加溢出：隱藏到容器解決了這個問題，下面顯示：

  <div id="div-input-load-cont" style="float: left; width: 100%; overflow: hidden; margin-top: 5px; 
      height: 350px"> 
      <asp:PlaceHolder ID="phInputLoadData" runat="server" EnableViewState="False"> 
      </asp:PlaceHolder> 
     </div> 

Answer 2

，你應該從風格