I am facing a challenge with a table that has varying widths of content in each cell. I need the lengthy content to be displayed next to nowrap and overflow.
After trying the solution mentioned here, all cells ended up with the same width. However, I require the cells to adjust according to their inner content to avoid excessive white space in cells with shorter content like checkboxes.
Due to the dynamic nature of the table where the number of columns and content may change, applying specific column widths or using divs is not an option for me.
Any suggestions on how to achieve this?
For reference, you can view the code example on JSfiddle here
<html>
<head>
<style>
table {
width: 100%;
}
table td {
border: 1px solid #ccc;
max-width: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
ID001
</td>
<td>
Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-
</td>
</tr>
</table>
</body>
</html>