I've got a table cell that I would always like to be a particular width. However, it doesn't work with large strings of unspaced text. Here's a test case:
<html><body>
<table><tbody><tr>
<td style="border: solid green 1px; width:200px; overflow:hidden;">
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr></tbody></table>
</body></html>
How do I get the text to be cut off at the edge of the box, rather than having the box expanded?
Well here is a solution for you but I don't really understand why it works:
<html><body>
<div style="width: 200px; border: 1px solid red;">Test</div>
<div style="width: 200px; border: 1px solid blue; overflow: hidden; height: 1.5em;">My hovercraft is full of eels. These pretzels are making me thirsty.</div>
<div style="width: 200px; border: 1px solid yellow; overflow: hidden; height: 1.5em;">
This_is_a_terrible_example_of_thinking_outside_the_box.
</div>
<table style="border: 2px solid black; border-collapse: collapse; width: 200px;"><tr>
<td style="width:200px; border: 1px solid green; overflow: hidden; height: 1.5em;"><div style="width: 200px; border: 1px solid yellow; overflow: hidden;">
This_is_a_terrible_example_of_thinking_outside_the_box.
</div></td>
</tr></table>
</body></html>
Namely, wrapping the cell contents in a div.
I'm not familiar with the specific issue, but you could stick a div, etc inside the td and set overflow on that.
That's just the way TD's are. I believe It may be because the TD element's 'display' property is inherently set to 'table-cell' rather than 'block'.
In your case, the alternative may be to wrap the contents of the TD in a DIV and apply width and overflow to the DIV.
<td style="border: solid green 1px; width:200px;">
<div style="width:200px; overflow:hidden;">
This_is_a_terrible_example_of_thinking_outside_the_box.
</div>
</td>
There may be some padding or cellpadding issues to deal with, and you're better off removing the inline styles and using external css instead, but this should be a start.
I just had this same problem.
You need to set style with table-layout:fixed; along with overflow:hidden; on the table element.
You'll have to set the table's style attributes: 'width' and 'table-layout:fixed' to let the 'overflow:hidden' attribute work properly.
Imo this works better then using divs with the 'width' style attribute, especially when using it for dynamic resizing calculations, the table will have a simpler DOM which makes manipulation easier because corrections for padding and margin are not required
As an extra, you don't have to set the width for all cells but only for the cells in the first row.
Like this:
<table style="width:0px;table-layout:fixed">
<tr>
<td style="width:60px;">
Id
</td>
<td style="width:100px;">
Name
</td>
<td style="width:160px;overflow:hidden">
VeryLongTextWhichShouldBeKindOfTruncated
</td>
</tr>
<tr>
<td style="">
Id
</td>
<td style="">
Name
</td>
<td style="overflow:hidden">
VeryLongTextWhichShouldBeKindOfTruncated
</td>
</tr>
</table>