I am trying to create a professional PDF document using standard APEX and HTML properties to create my content.

I am facing issue with the word-wrap property of CSS as it is misbehaving.

Let me explain

I am trying to display the contents of a field in a table (around 7 columns) and render it as pdf. Regardless of what I try, i cannot get the word-wrap to break the word so that the text does not go beyond the container.

Here is the code

<table class="tableStyle" >
<thead>
<tr>
<th width="5%" style="color:#FFFFFF;" align="center"><div id="inner">#</div></th>
<th width="30%" style="color:#FFFFFF;"><div id="inner">Field</div></th>
<th width="15%" style="color:#FFFFFF;"><div id="inner">Type</div></th>
<th width="30%" style="color:#FFFFFF;"><div id="inner">Values</div></th>
<th width="10%" style="color:#FFFFFF;"><div id="inner">Default Value</div></th>
<th width="10%" style="color:#FFFFFF;" align="center"><div id="inner">Track History</div></th>
</tr>
</thead>
<tbody>
<apex:repeat value="{!customObject.fields}" var="field">
<tr>
<td width="5%" align="center"><div id="inner">{!FLOOR(count)}</div></td>
<td width="30%"><div id="inner">{!field.label} ({!field.fullName})</div></td>
<td width="15%"><div id="inner">{!field.type}</div></td>
<td width="30%">
<div id="inner">
<apex:repeat value="{!field.values}" var="value">
{!value}<BR/>
</apex:repeat>
</div>
</td>
<td width="10%"><div id="inner">{!field.defaultValue}</div></td>
<td width="10%" align="center">
<div id="inner">
<apex:image value="{!URLFOR($Resource.DesignDocument, IF(field.trackHistory, 'images/checkbox/checkbox_checked.gif', 'images/checkbox/checkbox_unchecked.gif'))}"/>
</div>
</td>
<apex:variable var="count" value="{!count+ 1}"/>
</tr>
</apex:repeat>
</tbody>
</table>

and here is the css
table.tableStyle {
width: 100%;
border-collapse: collapse;
background-color: white;
cellpadding:0.5em;
table-layout: fixed;
}
#inner {
border-width: 0em;
margin: 0em;
word-wrap: break-word;
overflow: inherit;
}
td, tr, th{
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size: 0.9em;
color:#000000;
align: left;
vertical-align: top;
word-wrap: break-word;
overflow:hidden;
}

Here is the kicker -
When I render this table in visualforce as pdf, the content overflows and gets clipped (due to overflow:hidden) if i dont specify the overflow:hidden property, it spills over in the next <td> block

But when i take the renderas pdf away from the page, the content wraps properly. Could you tell me how to resolve this issue?