Wednesday, November 24, 2010

Breaking long word in Table-->TD

1. To table: style="table-layout:fixed;"
2. To td: style="word-wrap: break-word;"

<style type="text/css">
.mainDiv{
width: 600px;
margin: 0 auto;
background: bfbfbf;
}
.colorRows{
background-color:#FCF8EF;
border-right:1px solid #000000;
font-weight:bold;
height:34px;
padding:2px 2px 0 10px;
text-align:left;
vertical-align:middle;
}
.colorRows td{
word-wrap: break-word;
}

</style>



<div class="mainDiv">
<table cellpadding="0" cellspacing="0" align="center" width="100%" border="1" style="table-layout:fixed;">
<tr class="colorRows">
<td align="center" width="20%">Some Content</td>
<td align="center" width="20%">Some Content</td>
<td align="center" width="20%">SomeContentSomeContentSomeContentSomeContentSomeContentSomeContentSomeContentSomeContent</td>
<td align="center" width="20%">Some Content</td>
<td align="center" width="20%">Some Content</td>
</tr>
</table>
</div>