如何强制表格单元格< td>内容包装？ [英] How to force table cell <td> content to wrap?

问题描述

  / *可封装的储存格
 *添加此类以确保单元格中的文本将换行。 
 *默认情况下，data_table tds不换行。 
 * / 
 td.wrappable，
 table.data_table td.wrappable {
 white-space：normal; 
} 
  

覆盖整个页面：

 <％@ include file =../../ include / pre-header.html％> 
< form id =commentFormname=commentFormaction =method =post> 
 
 
 
< ctl：vertScroll height =300headerStyleClass =data_table_scrollbodyStyleClass =data_table_scrollenabled =$ {user.scrollTables}& 
< ctl：sortableTblHdrSetup topTotal =falsehref =show.whatif_edit_entry？entryId = $ {entry.entryId}/> 
< table class =data_table vert_scroll_table> 
 
 
 
< / tr> 
< tr> 
< ctl：sortableTblHdr styleClass =centertitle =Commentsproperty =commenttype =top>评论< / ctl：sortableTblHdr> 
< / tr> 
 
 
< c：forEach var =commentsitems =$ {entry.comments}> 
 
 
< tr id =id $ {comments.id}> 
< td id =comments  -  $ {comments.id}class =wrappablestyle =width：400px;> $ {comments.comment}< / td& 
< / tr> 
 
 
 
< / c：forEach> 
< c：if test =$ {lock.locked || form.entryId< 0}> 
<％ - 这是添加新注释的行。 - ％> 
< tr id =commentRow> 
< td>< input type =textid =commentname =commentsize =50maxlength =250onkeypress =javascript：return noenter（）;/> 
< a href =javascript：addComment（）;>< img src =../ images / icon_add.gifborder =0alt =Add/& a> 
< / td> 
 
< / tr> 
< / c：if> 
  

每次提交时都会延长。

此页面也在div内。是否需要设置div和表格的宽度？

解决方案

使用 table-layout ：

$ b

查看此示例：

 < html> 
< head> 
< style> 
 table {border-collapse：collapse; table-layout：fixed; width：310px;} 
 table td {border：solid 1px #fab; width：100px; word-wrap：break-word;} 
< / style> 
< / head> 
 
< body> 
< table> 
< tr> 
< td> 1< / td> 
< td> Lorem Ipsum< / td> 
< td> Lorem Ipsum只是印刷和排版行业的虚拟文本。 < / td> 
< / tr> 
< tr> 
< td> 2< / td> 
< td>当未知时，LoremIpsumhas在工程师的标准数据包中打开1500美元。< / td> 
< td> Lorem Ipsum一直是业界标准的虚拟文本，自从15世纪以来，当一个未知的打印机采取类型的厨房，并加扰它，以制作一个类型的标本书。< / td> 
< / tr> 
< tr> 
< td> 3< / td> 
< td>< / td> 
< td> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna ...< / td> 
< / tr> 
< / table> 
< / body> 
< / html> 
  

DEMO：

  table {border-collapse：collapse; table-layout：fixed; width：310px;} table td {border：solid 1px #fab; width：100px; word-wrap：break-word;}  

 < table> ; < tr> < td> 1< / td> < td> Lorem Ipsum< / td> < td> Lorem Ipsum仅仅是印刷和排版行业的虚拟文本。 < / td> < / tr> < tr> < td> 2< / td> < td>当未知时，工业标准数据集包括1500s，当未知时< td> < td> Lorem Ipsum一直是业界标准的虚拟文本，自从15世纪以来，当一个未知的打印机采取类型的厨房，并加扰它，以制作一个类型的标本书。< / td> < / tr> < tr> < td> 3< / td> < td>< / td> < td> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna ...< / td> < / tr> < / table>  

Heres the entire page * wrappable is definded in a main.css file

/* Wrappable cell
* Add this class to make sure the text in a cell will wrap.
* By default, data_table tds do not wrap.
*/
td.wrappable,
table.data_table td.wrappable {
    white-space: normal;
}                

Heres the entire page:

             <%@ include file="../../include/pre-header.html" %>
      <form id="commentForm" name="commentForm" action="" method="post">



 <ctl:vertScroll height="300" headerStyleClass="data_table_scroll"        bodyStyleClass="data_table_scroll" enabled="${user.scrollTables}">
 <ctl:sortableTblHdrSetup topTotal="false" href="show.whatif_edit_entry?   entryId=${entry.entryId}"/>
     <table class="data_table vert_scroll_table">



</tr>
<tr>
<ctl:sortableTblHdr styleClass="center"  title="Comments" property="comment"       type="top">Comments</ctl:sortableTblHdr>
    </tr>


       <c:forEach var="comments" items="${entry.comments}">


       <tr id="id${comments.id}">
        <td id="comments-${comments.id}" class="wrappable"     style="width:400px;">${comments.comment}</td>                                                            
     </tr>                 



</c:forEach>
<c:if test="${lock.locked || form.entryId < 0 }">
    <%-- This is the row for adding a new comment. --%>
    <tr id="commentRow">
        <td><input type="text" id="comment" name="comment" size="50" maxlength="250" onkeypress="javascript:return noenter();"/>
            <a href="javascript:addComment();"><img src="../images/icon_add.gif" border="0" alt="Add"/></a>
        </td>

    </tr>
</c:if>

It just stretches everytime I submit.
This page is within a div also. Do I need to set the width of the div and the table also?

解决方案

Use table-layout:fixed in the table and word-wrap:break-word in the td.

See this example:

<html>
<head>
   <style>
   table {border-collapse:collapse; table-layout:fixed; width:310px;}
   table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
   </style>
</head>

<body>
   <table>
      <tr>
         <td>1</td>
         <td>Lorem Ipsum</td>
         <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
      </tr>
      <tr>
         <td>2</td>
         <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
         <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
      </tr>
      <tr>
         <td>3</td>
         <td></td>
         <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
      </tr>
   </table>
</body>
</html>

DEMO:

table {border-collapse:collapse; table-layout:fixed; width:310px;}
       table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}

       <table>
          <tr>
             <td>1</td>
             <td>Lorem Ipsum</td>
             <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
          </tr>
          <tr>
             <td>2</td>
             <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
             <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
          </tr>
          <tr>
             <td>3</td>
             <td></td>
             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
          </tr>
       </table>
    

这篇关于如何强制表格单元格< td>内容包装？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！