I have a table which is built with the contents coming from a returned dataset. What I want to do is stop a 'description' cell from expanding over 280px wide, no matter what the content length (its s string). I have tried:
<td align="left" valign="top" style="overflow:hidden;" nowrap="nowrap" width="280px" >
But this doesn't seem to work. I don't want it to wrap, nor do I want anything over 280px to be displayed.
It appears that your HTML syntax is incorrect for the table cell. Before you try the other idea below, confirm if this works or not... You can also try adding this to your table itself: table-layout:fixed.. .
<td style="overflow: hidden; width: 280px; text-align: left; valign: top; whitespace: nowrap;">
[content]
</td>
New HTML
<td>
<div class="MyClass"">
[content]
</div>
</td>
CSS Class:
.MyClass{
height: 280px;
width: 456px;
overflow: hidden;
white-space: nowrap;
}
<table border="1" width="183" style='table-layout:fixed'>
<col width="67">
<col width="75">
<col width="41">
<tr>
<td>First Column</td>
<td>Second Column</td>
<td>Third Column</td>
</tr>
<tr>
<td>Row 1</td>
<td>Text</td>
<td align="right">1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Abcdefg</td>
<td align="right">123</td>
</tr>
<tr>
<td>Row 3</td>
<td>Abcdefghijklmnop</td>
<td align="right">123456</td>
</tr>
</table>
I know it's old school, but give that a try, it works.
may also want to add this:
<style>
td {overflow:hidden;}
</style>
Of course, you'd put this in a separate linked stylesheet, and not inline... wouldn't you ;)
To post Chris Dutrow's comment here as answer:
style="table-layout:fixed;"
in the style of the table itself is what worked for me. Thanks Chris!
Full example:
<table width="55" height="55" border="0" cellspacing="0" cellpadding="0" style="border-radius:50%; border:0px solid #000000;table-layout:fixed" align="center" bgcolor="#152b47">
<tbody>
<td style="color:#ffffff;font-family:TW-Averta-Regular,Averta,Helvetica,Arial;font-size:11px;overflow:hidden;width:55px;text-align:center;valign:top;whitespace:nowrap;">
Your table content here
</td>
</tbody>
</table>
Simply set the max-width attribute to 280px like this:
<td align="left" valign="top" style="overflow:hidden;" nowrap="nowrap" max-width="280px" width="280px">
This will solve your problem.
Try the following css to stop expanding the table and it's cells.
table {
table-layout: fixed;
width: 100%;
}
th, td {
word-wrap: break-word;
}
table-layout: fixed will make your table fixed. But still the columns / cells will overlow or expand. To fix that issue use word-wrap: break-word