Tablo hücre zorlamak için nasıl <td> sarmak için içerik?

SORU

12 Temmuz 2011, Salı

Tablo hücre zorlamak için nasıl <td> sarmak için içerik?

Sayfanın tamamını Heres * açık wrappable bir ana definded.css dosyası

/* 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;
}

İşte tüm sayfa:

             <%@ 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>

Sadece ben teslim ne zaman uzanıyor.
Bu sayfa bir div de yer almaktadır. Div genişliğini ve masa da ayarlamak gerekiyor mu?

CEVAP

12 Temmuz 2011, Salı

Td tabloda table-layout:fixed word-wrap:break-word kullanın.

Örnek:

<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>

Bunu Paylaş: