呈现页面时，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页面时，由于表的宽度，我的整个右手边容器都会向左浮动。在这个演示中，我将列数设置为19。然而，当我最小化屏幕时，一切都会以应有的方式正确显示

我的问题是：我该怎么做才能确保重新格式化的数据表正确显示，而不是向左浮动？如有任何帮助，我们将不胜感激。

Answer 1

您应该从样式中清除float:left

Answer 2

将Overflow：隐藏到容器中解决了问题，如下所示：

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