How can I constrain column widths without text clipping or wrapping? - html

Question

I would like to constraint table columns width with no text clipping (no wrapping).
I came accross many many threads on Stackoverflow (sorry for duplicates), but none of them really gives straightforward solutions, even though I believe it is a rather simple issue...
First all of all, do I have to contrainst both header and content column width ?
I don't really want to insert div inside th / td (I haven't found straightforward solution anyway).
I believe that the white-space: nowrap; and text-overflow: clip; table styles width <th style="width: 100px>...</th> (idem td) would be enought, but it doesn't work). Does the CSS order of them matter?
I don't understand why something as simple as follows doesn't work..
<th style="width: 72px; text-overflow: clip; white-space: nowrap;">ABCDEFGHIJKLMNOPQRSTUVWXY abcdefghijklmnopqrstuvwyz</th><!-- Of course, specified in CSS file -->
and would like to see something like:
----------------
|ABCDEFG|
----------------
UPDATE
CSS styles
th {
max-width: 72px;
white-space: nowrap;
text-overflow: clip;
overflow: hidden;
}
td {
max-width: 72px;
white-space: nowrap;
text-overflow: clip;
overflow: hidden;
}
Razor page
<tH #Html.Raw(Helpers.HTMLTagAttribute(Enums.FieldType.Date))>
...
<td #Html.Raw(Helpers.HTMLTagAttribute(Enums.FieldType.Date))>
...
Where the helper method HTMLBodyTagStyleAttributes(FieldType fieldType) uses the HTMLWidth(FieldType fieldType) defined as follows with FieldType an enum relative to each column:
private static string HTMLWidth(FieldType fieldType)
{
string width;
switch (fieldType)
{
case FieldType.Date:
width = "72px";
break;
// ...
default:
width = "86px";
break;
}
return width != "" ? $"max-width: {width};" : "";
}
Thanks for any insights!

Answer 1

try adding a max-width and overflow: hidden, e.g.:
th {
max-width: 72px;
text-overflow: clip;
white-space: nowrap;
overflow: hidden;
}

Answer 2

Fix the header only. Not the cell.
Use CSS properties word-wrap and word-break
div {
word-wrap: break-word;
word-break: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}