CSS表問題

Question

如何從推阻表時的備註字段有大量的文字，如下表碼，編輯：忘了提，這是從http://datatables.net/

<div id="comment_wrapper" class="dataTables_wrapper" role="grid"><div class="dataTables_filter" id="comment_filter"><label>Search: <input type="text" aria-controls="comment"></label></div><table id="comment" class="dataTable" aria-describedby="comment_info"> 
     <thead> 
     <tr role="row"><th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" style="width: 60px; " aria-label=""></th><th class="sorting" role="columnheader" tabindex="0" aria-controls="comment" rowspan="1" colspan="1" style="width: 55px; " aria-label="Name: activate to sort column ascending">Name</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="comment" rowspan="1" colspan="1" style="width: 4702px; " aria-label="Comment: activate to sort column ascending">Comment</th><th class="sorting_desc" role="columnheader" tabindex="0" aria-controls="comment" rowspan="1" colspan="1" style="width: 60px; " aria-sort="descending" aria-label="Created: activate to sort column descending">Created</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="comment" rowspan="1" colspan="1" style="width: 77px; " aria-label="Attachments: activate to sort column ascending">Attachments</th><th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" style="width: 46px; " aria-label="&lt;center&gt;Delete?&lt;/center&gt;"><center>Delete?</center></th></tr> 
    </thead> 

    <tbody role="alert" aria-live="polite" aria-relevant="all"><tr class="odd"> 
     <td class=" "> 
     <img alt="Google-qr-code" height="50" src="/uploads/user/avatar/1/google-qr-code.jpg" width="50"> 
     </td> 
     <td class=" ">Ahmet2</td> 
     <td style="overflow: auto;" class=" ">fdssssssssssssssssssfsddddddddddddfdssssssssssssssssssfsddddddddddddfdssssssssssssssssssfsddddddddddddfdssssssssssssssssssfsddddddddddddfdssssssssssssssssssfsddddddddddddfdssssssssssssssssssfsddddddddddddfdssssssssssssssssssfsddddddddddddfdssssssssssssssssssfsddddddddddddfdssssssssssssssssssfsddddddddddddfdssssssssssssssssssfsddddddddddddfdssssssssssssssssssfsddddddddddddfdssssssssssssssssssfsddddddddddddfdssssssssssssssssssfsddddddddddddfdssssssssssssssssssfsddddddddddddfdssssssssssssssssssfsddddddddddddfdssssssssssssssssssfsddddddddddddfdssssssssssssssssssfsddddddddddddfdssssssssssssssssssfsddddddddddddfdssssssssssssssssssfsddddddddddddfdssssssssssssssssssfsddddddddddddfdssssssssssssssssssfsddddddddddddfdssssssssssssssssssfsddddddddddddv</td> 
     <td class=" sorting_1">2012-03-21 13:43:53</td> 
     <td class=" "></td> 
     <td class=" "><center><a href="/companies/12/comments/48" data-confirm="Are you sure?" data-method="delete" rel="nofollow"><img alt="Delete" height="15px" src="/assets/delete.png"></a></center></td> 
    </tr><tr class="even"> 
     <td class=" "> 
     <img alt="Google-qr-code" height="50" src="/uploads/user/avatar/1/google-qr-code.jpg" width="50"> 
     </td> 
     <td class=" ">Ahmet2</td> 
     <td style="overflow: auto;" class=" ">test</td> 
     <td class=" sorting_1">2012-03-20 10:26:13</td> 
     <td class=" "><a href="/uploads/comment/file/24/google-qr-code.jpg">google-qr-code.jpg</a></td> 
     <td class=" "><center><a href="/companies/12/comments/24" data-confirm="Are you sure?" data-method="delete" rel="nofollow"><img alt="Delete" height="15px" src="/assets/delete.png"></a></center></td> 
    </tr><tr class="odd"> 
     <td class=" "> 
     <img alt="Google-qr-code" height="50" src="/uploads/user/avatar/1/google-qr-code.jpg" width="50"> 
     </td> 
     <td class=" ">Ahmet2</td> 
     <td style="overflow: auto;" class=" ">hey</td> 
     <td class=" sorting_1">2012-03-20 10:00:02</td> 
     <td class=" "></td> 
     <td class=" "><center><a href="/companies/12/comments/12" data-confirm="Are you sure?" data-method="delete" rel="nofollow"><img alt="Delete" height="15px" src="/assets/delete.png"></a></center></td> 
    </tr><tr class="even"> 
     <td class=" "> 
     <img alt="Google-qr-code" height="50" src="/uploads/user/avatar/1/google-qr-code.jpg" width="50"> 
     </td> 
     <td class=" ">Ahmet2</td> 
     <td style="overflow: auto;" class=" ">test</td> 
     <td class=" sorting_1">2012-03-20 10:00:00</td> 
     <td class=" "></td> 
     <td class=" "><center><a href="/companies/12/comments/11" data-confirm="Are you sure?" data-method="delete" rel="nofollow"><img alt="Delete" height="15px" src="/assets/delete.png"></a></center></td> 
    </tr><tr class="odd"> 
     <td class=" "> 
     <img alt="Google-qr-code" height="50" src="/uploads/user/avatar/1/google-qr-code.jpg" width="50"> 
     </td> 
     <td class=" ">Ahmet2</td> 
     <td style="overflow: auto;" class=" ">test</td> 
     <td class=" sorting_1">2012-03-20 09:59:41</td> 
     <td class=" "></td> 
     <td class=" "><center><a href="/companies/12/comments/10" data-confirm="Are you sure?" data-method="delete" rel="nofollow"><img alt="Delete" height="15px" src="/assets/delete.png"></a></center></td> 
    </tr></tbody></table><div class="dataTables_info" id="comment_info"></div><div class="dataTables_paginate paging_full_numbers" id="comment_paginate"><a tabindex="0" class="first paginate_button paginate_button_disabled" id="comment_first">First</a><a tabindex="0" class="previous paginate_button paginate_button_disabled" id="comment_previous">Previous</a><span><a tabindex="0" class="paginate_active">1</a><a tabindex="0" class="paginate_button">2</a></span><a tabindex="0" class="next paginate_button" id="comment_next">Next</a><a tabindex="0" class="last paginate_button" id="comment_last">Last</a></div></div> 

一個DataTable

Answer 1

看起來你有一個長長的單詞推出你的桌子。您可以使用表格單元格上的CSS word-wrap屬性。這會告訴任何太長而不能在中間打破而不是推擠它的容器邊界的詞。

#comment td{ 
    word-wrap: break-word; 
} 

編輯時，您可能還必須在#comment元素上設置寬度。如果要填充整個容器，請將其設置爲100％。您可能還需要在評論td上設置特定的寬度。

Answer 2

您可以用overflow: auto將每個註釋包裝到一個元素中（而不是TD表格單元本身），以在註釋太長時強制顯示本地滾動條。

Answer 3

這將是更容易幫助，如果我們可以看看你的CSS編碼。 您可能想嘗試將overflow: hidden;添加到包含評論的特定元素。

http://www.w3schools.com/cssref/pr_pos_overflow.asp