2012-07-16 76 views
1

我有一个包含5列和多行的html表格。第一列由标签和其他文本框组成。列数可能会根据数据而有所不同。HTML表格数据在Chrome中重叠

每列的宽度由百分比(100%除以列数)平均分配。

在IE中,如果标签文本很长,第一列(标签)会自动扩展。但在Chrome中它并没有扩大。

请问我需要申请第一栏的哪种风格?

以下是表中的服务器端代码:

 TableRow headerRow = new TableRow(); 
     foreach (string s in columns) 
     { 
      TableCell cell = new TableCell(); 
      cell.Width = Unit.Percentage(100.00/colsCount); 
      cell.BorderColor = Color.White; 
      cell.BorderStyle = BorderStyle.None; 
      System.Web.UI.WebControls.Label tb = new System.Web.UI.WebControls.Label(); 
      //tb.TextMode = TextBoxMode.MultiLine; 
      //tb.Width = Unit.Percentage(100.00); 
      //tb.Height = Unit.Pixel(45); 


      tb.ID = "TextHeaderBoxRow" + s; 
      tb.BackColor = Color.FromArgb(211, 230, 254); 
      tb.BorderColor = Color.White; 
      tb.BorderStyle = BorderStyle.Solid; 
      tb.BorderWidth = Unit.Pixel(0); 
      tb.Font.Bold = true; 
      tb.Text = s; 
      //tb.Attributes.Add("style", "overflow :hidden"); 
      tb.Font.Name = "Tahoma"; 
      tb.Font.Size = FontUnit.Point(9); 
      //tb.ReadOnly = true; 
      tb.TabIndex = -1; 

      cell.Controls.Add(tb); 
      headerRow.Cells.Add(cell); 
     } 
     Table1.Rows.Add(headerRow); 

     // Now iterate through the table and add your controls 
     for (int i = 0; i < rowsCount; i++) 
     { 
      TableRow row = new TableRow(); 
      row.Style.Add(HtmlTextWriterStyle.PaddingRight, "5px"); 
      row.Width = Unit.Percentage(100.00); 

      for (int j = 0; j < colsCount; j++) 
      { 
       TableCell cell = new TableCell(); 
       cell.BorderColor = Color.White; 
       cell.Width = Unit.Percentage(100.00/colsCount); 
       TextBox tb = new TextBox(); 
       tb.Width = Unit.Percentage(100.00); 
       tb.Font.Name = "Tahoma"; 
       tb.Font.Size = FontUnit.Point(9); 
       tb.Attributes.Add("onchange", "javascript:Changeflag()"); 
       tb.Attributes.Add("onkeyup", "javascript:Changeflag()"); 

       // Set a unique ID for each TextBox added 
       tb.ID = "TextBoxRow_" + i + "Col_" + j; 

       // Add the control to the TableCell 
       cell.Controls.Add(tb); 
       // Add the TableCell to the TableRow 
       row.Cells.Add(cell); 
      } 
      // Add the TableRow to the Table 
      Table1.Rows.Add(row); 
     } 
+1

你可以发布一些代码或jsfiddle吗? – JSW189 2012-07-16 13:11:13

回答

0

Chrome的以下你告诉它做什么。您指定所有宽度应该相等,因此它将包装标签。 IE正在做你想做的事,但不是你告诉它做的事。

如果您无法指定第一列的宽度足够大以至于没有任何环绕,则可以尝试将添加到标签的样式。

+0

我应用了“White-space:nowrap”风格,但它不适用于Chrome – Iraiyavan 2012-07-17 06:59:25