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

，你应该从风格