Html表数据在Chrome中重叠

时间:2012-07-16 13:01:05

标签: html width html-table

我有一个包含5列和多行的html表。第一列由标签组成,其他列由文本框组成。列数可能因数据而异。

每列的宽度按百分比平均分配(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 个答案:

答案 0 :(得分:0)

Chrome正在按照您的要求进行操作。您指定所有宽度应该相等,因此它将包装标签。 IE正在做你想要的,但不是你告诉它做的。

如果您无法将第一列的宽度指定为足够大以至于没有任何换行,则可以尝试将white-space=nowrap添加到标签的样式中。