Question

I have two tables:

<h3>JVM Garbage Collector</h3>
<table style="width:100%" border="1">
<tr><th>Name</th><th>Description</th><th>Type</th><th>Key</th></tr>
<tr>
<td style="width:25%">PS Scavenge collections</td>
<td style="width:33%">Number of garbage collections by the PS Scavenge collector.</td>
<td style="width:12%">JMX</td>
<td style="width:30%">Object: java.lang:type=GarbageCollector,name=PSScavenge<br/>Attribute: CollectionCount</td>
</tr>
</table>
<h3>JVM Memory Pool</h3>
<table style="width:100%" border="1">
<tr><th>Name</th><th>Description</th><th>Type</th><th>Key</th></tr>
<tr>
<td style="width:25%">Code Cache committed</td>
<td style="width:33%">Committed bytes of the Code Cache memory pool. This is included with HotSpot JVMs, which contains memory used for compilation and storage of native code. It is part of non-heap memory.</td>
<td style="width:12%">JMX</td>
<td style="width:30%">Object: java.lang:type=MemoryPool,name=Code Cache<br/>Attribute: Usage.committed</td>
</tr>

The first one is behaving correctly, but the second one is not sizing according to my widths and I am guessing it’s because of the text content within.
​

Answer 1

Apply the css word-break:break-all to all TD you want to break that way.

See jsfiddle

This is a CSS3 property so it probably won’t work on IE6 and 7.