Табличная ячейка расширяется, когда наведите курсор на содержимое ячейки

Question

У меня динамически созданная таблица asp: на моем сайте. В одном столбце таблицы у меня есть asp: Label в каждой строке, которая заполнена именами пользователей. В строке заголовка ширина ячейки для этого столбца равна 150 пикселей. Максимальная ширина имени пользователя составляет около 75 пикселей. На каждой метке у меня есть класс наведения CSS, который меняет цвет шрифта и делает шрифт BOLD. Когда вы наводите верх над самыми длинными именами пользователей, все ячейки в этом столбце расширяются, что выводит другие столбцы на несколько пикселей. Как это исправить?

Мне известно объявление групп столбцов для таблицы HTML, однако я не могу это сделать с помощью asp: table control.

Table tbl = new Table(); 

TableRow headerRow = new TableRow(); 

TableCell cell1 = new TableCell(); 
cell1.Attributes.Add("style", "width:50px"); 
cell1.Text = "Rank"; 
headerRow.Cells.Add(cell1); 

TableCell cell2 = new TableCell(); 
cell2.Attributes.Add("style", "width:150px"); 
cell2.Text = "User"; 
headerRow.Cells.Add(cell2); 

TableCell cell3 = new TableCell(); 
cell3.Attributes.Add("style", "width:75px"); 
cell3.Text = "Champion"; 
headerRow.Cells.Add(cell3); 

tbl.Rows.Add(headerRow); 

foreach (var user in users) 
{ 
    TableRow contentRow = new TableRow(); 

    TableCell contentCell1 = new TableCell(); 
    contentCell1.Text = user.Rank.ToString(); 
    contentRow.Cells.Add(contentCell1); 

    TableCell contentCell2 = new TableCell(); 
    Label userLbl = new Label(); 
    userLbl.Text = user.UserName; 
    userLbl.CssClass = "HoverLabel"; 
    contentCell2.Controls.Add(Label); 
    contentRow.Cells.Add(contentCell2); 

    TableCell contentCell3 = new TableCell(); 
    contentCell3.Text = user.Champion.ToString(); 
    contentRow.Cells.Add(contentCell2); 

    tbl.Rows.Add(contentRow); 
} 

Answer 1

Создание текста полужирным шрифтом будет расширяться, поэтому первый взгляд на увеличение width, если он не подходит.

Но если вы настаиваете на «обрезанного» текст, который не подходит вы можете заставить его со следующими стилями:

Таблица: table-layout: fixed и width значение

TableCell: overflow: hidden; white-space: nowrap;