CSS: How to shrink td containing ellipsis - html

Question

I have done quite a bit or searching on this but could not find a solution for my specific case. I am a beginner to CSS and the solution is probably really simple, I just cannot find it. So I am trying to create a table that has some columns with long text. I am able to show ellipsis to cut off too long text, but I would like to have the column resize and the ellipsis be updated if I reduce the size of the window, that also reduces the size of the table itself. Now the cell width remains the same and a horizontal scroll bar is shown, which I want to prevent. I know using fixed width for the column is probably the problem, but it is the only way I am able to show the ellipsis in the first place, without fixed width no ellipsis is shown. Here is a very simplified piece of code and the css that easily shows the problem:
<div class="tableFixHead">
<table>
<thead>
<tr>
<th>one</th>
<th>two</th>
</tr>
</thead>
<tbody>
<tr>
<td>
first column
</td>
<td>
<div class="overflowTableText">
the entire text that is way too long to show all at once
</div>
</td>
</tr>
</tbody>
</table>
</div>
.tableFixHead {
overflow: scroll;
height: 200px;
max-width: 50%;
}
.overflowTableText {
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
Any pointers are appreciated

Answer 1

One way to do this is to use #media query. Do something like this
.tableFixHead {
overflow: scroll;
height: 200px;
max-width: 50%;
}
.overflowTableText {
max-width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* add as many break points you want */
#media screen (max-width: 768px) {
.overflowTableText {
max-width: 200px;
}
}
#media screen (max-width: 576px) {
.overflowTableText {
max-width: 150px;
}
}
<div class="tableFixHead">
<table>
<thead>
<tr>
<th>one</th>
<th>two</th>
</tr>
</thead>
<tbody>
<tr>
<td>first column</td>
<td>
<div class="overflowTableText">
the entire text that is way too long to show all at once
</div>
</td>
</tr>
</tbody>
</table>
</div>

Answer 2

After fiddling around a bit I found a solution that works with multiple columns with ellipsis:
<div class="tableFixHead">
<table width="100%">
<thead>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>
<tbody>
<tr>
<td width="100px">
first column
</td>
<td class="overflowTableText"><span>
the entire text that is way too long to show all at once the entire text that is way too long to show all at once</span>
</td>
<td class="overflowTableText"><span>
the entire text that is way too long to show all at once the entire text that is way too long to show all at once</span>
</td>
</tr>
</tbody>
</table>
</div>
.tableFixHead {
overflow: scroll;
height: 200px;
border-collapse: separate;
width: 90%;
padding-right: 8px;
}
.overflowTableText {
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}

Answer 3

Good day, Do you know bootstap? you can easily do that with bootsrap
https://getbootstrap.com/docs/4.1/content/tables/#responsive-tables