I am currently facing an issue with a table nested within a div that is absolutely positioned on my webpage. I want to set specific widths for the second, third, etc columns while allowing the first column to automatically resize, even if it results in truncating the text so that other columns remain visible. However, my current setup pushes the right columns out of the div.
If you'd like to replicate the problem, you can visit this fiddle: http://jsfiddle.net/pdtLoy6d/2/. The issue occurs when resizing the right pane of the fiddle.
<table>
<col width="auto" />
<col width="80px" />
<col width="150px" />
<tr>
<td>This is a thing it could be a really really really long string and I want it to truncate</td>
<td>Thing2</td>
<td>That thing is always short</td>
</tr>
<tr>
<td>Not sure if it matters, but these rows are all dynamically generated</td>
<td>Thing2</td>
<td>test</td>
</tr>
</table>
table {
width: 100%;
border: 1px solid gray;
border-collapse: collapse;
}
td {
border: 1px solid gray;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}