html - How to print the characters in the next line for a <td> tag with fixed layout? -

whenever tried add more characters in <td> tag, table expands according size. use table-layout:fixed; , overflow:scroll; overcome characters missing. need have characters printed in next line inside <td> tag.

    .styletable {     margin:0px;padding:0px;     width:97.9%;     box-shadow: 10px 10px 5px #888888;     border:1px solid #000000;      -moz-border-radius-bottomleft:0px;     -webkit-border-bottom-left-radius:0px;     border-bottom-left-radius:0px;      -moz-border-radius-bottomright:0px;     -webkit-border-bottom-right-radius:0px;     border-bottom-right-radius:0px;      -moz-border-radius-topright:0px;     -webkit-border-top-right-radius:0px;     border-top-right-radius:0px;      -moz-border-radius-topleft:0px;     -webkit-border-top-left-radius:0px;     border-top-left-radius:0px; }.styletable table{     border-collapse: collapse;         border-spacing: 0;     width:100%;     height:100%;     margin:0px;padding:0px;          table-layout:fixed;  }.styletable tr:last-child td:last-child {     -moz-border-radius-bottomright:0px;     -webkit-border-bottom-right-radius:0px;     border-bottom-right-radius:0px; } .styletable table tr:first-child td:first-child {     -moz-border-radius-topleft:0px;     -webkit-border-top-left-radius:0px;     border-top-left-radius:0px; } .styletable table tr:first-child td:last-child {     -moz-border-radius-topright:0px;     -webkit-border-top-right-radius:0px;     border-top-right-radius:0px; }.styletable tr:last-child td:first-child{     -moz-border-radius-bottomleft:0px;     -webkit-border-bottom-left-radius:0px;     border-bottom-left-radius:0px; }.styletable tr:hover td{  } .styletable tr:nth-child(odd){      background-color:#e5e5e5;  } .styletable tr:nth-child(even){      background-color:#ffffff; }  .styletable td{     vertical-align:middle;     white-space: nowrap;      overflow:inherit;      border:1px solid #000000;     border-width:0px 1px 1px 0px;     text-align:left;     padding:7px;     font-size:10px;     font-family:arial;     font-weight:normal;     color:#000000; }.styletable tr:last-child td{     border-width:0px 1px 0px 0px; }.styletable tr td:last-child{     border-width:0px 0px 1px 0px; }.styletable tr:last-child td:last-child{     border-width:0px 0px 0px 0px; } .styletable tr:first-child td{         background:-o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );     background:-moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );     filter:progid:dximagetransform.microsoft.gradient(startcolorstr="#cccccc", endcolorstr="#b2b2b2");  background: -o-linear-gradient(top,#cccccc,b2b2b2);      background-color:#cccccc;     border:0px solid #000000;     text-align:center;     border-width:0px 0px 1px 1px;     font-size:14px;     font-family:arial;     font-weight:bold;     color:#000000; } .styletable tr:first-child:hover td{     background:-o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );     background:-moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );     filter:progid:dximagetransform.microsoft.gradient(startcolorstr="#cccccc", endcolorstr="#b2b2b2");  background: -o-linear-gradient(top,#cccccc,b2b2b2);      background-color:#cccccc; } .styletable tr:first-child td:first-child{     border-width:0px 0px 1px 0px; } .styletable tr:first-child td:last-child{     border-width:0px 0px 1px 1px; } 

html

<div class="styletable" >                 <table >                     <tr>                         <td>                             title 1                         </td>                         <td >                             title 2                         </td>                         <td>                             title 3                         </td>                     </tr>                     <tr>                         <td >                             row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1row1                         </td>                         <td>                             row 1                         </td>                         <td>                             row 1                         </td>                     </tr>                     <tr>                         <td >                             row 2                         </td>                         <td>                             row 2                         </td>                         <td>                             row 2                         </td>                     </tr>                     <tr>                         <td >                             row 2                         </td>                         <td>                             row 2                         </td>                         <td>                             row 2                         </td>                     </tr>                     <tr>                         <td >                             row 3                         </td>                         <td>                             row 3                         </td>                         <td>                             row 3                         </td>                     </tr>                 </table>             </div> 

you need fix width either width or max-width element on css

td{     max-width: 100px; } 

for specific td, use id or class , edit way

.td, #td {     max-width: 100px; }