Html 表数据在 Chrome 中重叠

Posted 2023-03-05

【中文标题】Html 表数据在 Chrome 中重叠

【英文标题】：Html table data gets overlapped in Chrome

【发布时间】：2012-07-15 08:01:46

【问题描述】：

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

每列的宽度均按百分比分配（100% 除以列数）。

在 IE 中，如果标签文本很长，第一列（标签）会自动扩展。但在 Chrome 中它没有扩展。

请建议我在第一栏需要申请哪种风格？

以下是 Table 的服务器端代码：

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

【问题讨论】：

你能发布一些代码或jsfiddle吗？

【参考方案1】：

Chrome 正在按照您的指示进行操作。您指定所有宽度都应该相等，因此它会包裹标签。 IE 正在做你想做的事，而不是你告诉它做的事。

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

【讨论】：

我应用了“White-space:nowrap”样式，但它不适用于 Chrome