I am having a minor problem with tables where I have long single words or multiple medium sizes words in multiple columns that take up a lot of space. I get a result that looks like http://cl. ly/8cb66d08b6b9755ce858 The rows have set width percents even though I would like natural growth in each, as well line-wrapper won't break it and display:none doesn't actually stop it as the table grows naturally. What I would like is for the table to stay with in the parents set widths (the blue section with some padding). As well the header is a div around the table for styling that I cannot change.
<div class="table-wrapper group">
<table class="tabular sortable" id="campaign_table" style="table-layout:fixed; word-wrap: break-word; ">
<thead>
<tr>
<td class="sorttable_nosort" style="border-right-width: 1px; border-right-style: solid; border-right-color: rgb(255, 255, 255); ">
<input type="checkbox" id="check_all_2" name="check_all_2" title="Select All" onclick="selectAllTable(document.wizard_form, check_all_2); checkIsSelected([ 'by_date', 'display_hidden', 'check_all_2']);">
</td>
<td width="37%" style="border-right-width: 1px; border-right-style: solid; border-right-color: rgb(255, 255, 255); ">List/Campaign</td>
<td width="43%" style="border-right-width: 1px; border-right-style: solid; border-right-color: rgb(255, 255, 255); ">Template & Segmentation</td>
<td width="17%" style="min-width: 140px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(255, 255, 255); ">Date Sent</td>
<td width="4%">Sent</td>
</tr>
</thead>
<tbody class="campaign-table">
<input type="hidden" id="campaignNum" name="campaignNum" value="1">
<tr class="evenRow">
<td>
<label>
<input type="checkbox" id="select_981" name="select_981" onclick="checkIsSelected(['by_date', 'display_hidden']);">
</label>
</td>
<td>0ThisIsAReallyLongNameThatHasNoSpacesHopefullyMaxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
<td>ThisIsAReallyLongNameThatHasNoSpacesHopefullyMax <br> (BiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiggggggggggggggggggggggggggggggggggggggggText)</td>
<td>11/08/10 4:28 PM</td>
<td>0</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</div>
Note most of the classes and styles are generated from some JavaScript file. If you know any plugins that work with the 1.8 of jQuery (I have seen a few that could work but they require 1.3). I am wondering if I might have to do a manual change as the tables column widths are being set because of the data in them and modifying that data wouldn't automatically modify the width of the columns.
Part of the problem could be that you have assigned the CSS property for word-wrap to the table, but not the actual cells containing the data. See if you can assign a style or class that sets the word-wrap: break-word; property on the actual <td> element.
Another consideration to look at is use of the ­ soft hyphen. If you can - either server-side before the text is rendered to the page or in the browser using JavaScript - insert this soft hyphen character into your text, the browser will know to break your words at that point.
Finally, see if applying the <colgroup> and <col> elements at the start of your table helps to both clean up the table structure and more explicitly define the column widths. This last point may not do much to actually affect the word wrapping and hyphenation of your text, but may aid in table layout.