วิธีการบังคับให้เซลล์ของตาราง <td> เนื้อหาห่อ

146

นี่คือการกำหนด * wrappable ทั้งหน้าในไฟล์ main.css

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

นี่คือหน้าทั้งหมด:

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

        </table>

    </ctl:vertScroll>
</form>

มันเหยียดทุกครั้งที่ฉันส่ง
หน้านี้อยู่ใน div ด้วย ฉันต้องตั้งค่าความกว้างของ div และตารางด้วยหรือไม่

html css html-table

— หมอฮอลิเดย์
แหล่งที่มา

1

คุณกำลังกำหนดอยู่wrappableที่ไหน

— ศีล

2

อยู่ที่ไหน.wrappableระดับที่กำหนดไว้? สิ่งที่เบราว์เซอร์ที่คุณใช้?

— Dani

เบราว์เซอร์ที่ใช้เป็นสิ่งสำคัญโดยเฉพาะอย่างยิ่ง --- รุ่นเก่าของ IE max-widthไม่สนับสนุน มีอีกหลายสิ่งที่อาจเป็นปัญหาและเป็นไปไม่ได้ที่จะพูดโดยไม่มีข้อมูลเพิ่มเติม แต่นั่นเป็นสิ่งที่สามารถทำลายได้

— Chris Morgan

โดยพื้นฐานแล้วฉันแค่พยายามส่งข้อความให้อยู่ในความกว้างและไม่ยืดโต๊ะหลังจากที่ฉันส่งมันออกมา

— Doc Holiday

สิ่งนี้อาจช่วยstackoverflow.com/a/26560829/1924979

— Harsh Vakharia

292

ใช้table-layout:fixedในตารางและword-wrap:break-wordใน td

ดูตัวอย่างนี้:

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

การสาธิต:

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>

ขยายตัวอย่างข้อมูล

— jim31415
แหล่งที่มา

คุณควรเพิ่มเส้นขอบยุบ: ยุบบิตไปที่ส่วนบนสุดของคำตอบของคุณเพื่อให้คนที่กำลังสแกนคำตอบของคุณสามารถรับคำตอบแบบเต็มได้อย่างรวดเร็ว

— dwoodwardgb

สำหรับตารางการปรับเปลี่ยนเพิ่มเติมอีกเล็กน้อย {เส้นขอบยุบ: ยุบ table-layout: fixed; word-wrap: break-word;} table td {width: 100px; การตัดคำ: break-word;}

— Kuldeep Kumar

44

มันใช้งานได้สำหรับฉัน

<style type="text/css">

 td {

    /* css-3 */
    white-space: -o-pre-wrap; 
    word-wrap: break-word;
    white-space: pre-wrap; 
    white-space: -moz-pre-wrap; 
    white-space: -pre-wrap; 

}

และแอตทริบิวต์ของตารางคือ:

table { 
  table-layout: fixed;
  width: 100%
}

— Lavekush Agrawal
แหล่งที่มา

15

td {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}

— Jafstar
แหล่งที่มา

6

บางทีคุณสามารถอธิบายรหัสได้เพื่อทุกคนจะได้รับความชัดเจน

— Federico

มันแสดงตารางเรียบร้อย แต่เนื้อหาถูกตัด; กล่าวคือ ไม่เห็นคำบางคำหากเนื้อหาใหญ่ overflow:hidden

— wpcoder

Hardcoding ความกว้างสูงสุดนั้นไม่ค่อยดีนัก มันไม่ได้ปรับขนาดเช่นเดียวกับความละเอียดขนาดใหญ่ ฯลฯ คุณต้องการให้ตารางตอบสนองต่อขนาดอย่างถูกต้อง

— user959690

4

หากคุณกำลังใช้ตารางตอบสนอง Bootstrap เพียงแค่ต้องการตั้งค่าความกว้างสูงสุดสำหรับหนึ่งคอลัมน์ใดคอลัมน์หนึ่งและทำการตัดข้อความทำให้สไตล์ของคอลัมน์นี้เป็นไปตามที่ใช้งานได้

max-width:someValue;
word-wrap:break-word

— เฟิงฮัน
แหล่งที่มา

5

โปรดทราบว่าmax-widthจะต้องเป็นpxค่าไม่ใช่%

— maxedison

3

สิ่งนี้ใช้ได้สำหรับฉันเมื่อฉันต้องการแสดง JSON "สวย" ในเซลล์:

td { white-space:pre }

เพิ่มเติมเกี่ยวกับ`white-space`คุณสมบัติ :

normal : ค่านี้จะนำตัวแทนผู้ใช้เพื่อยุบลำดับของพื้นที่สีขาวและแบ่งบรรทัดตามความจำเป็นในการกรอกข้อมูลลงในกล่องรายการ

pre: ค่านี้ป้องกันตัวแทนผู้ใช้จากการยุบลำดับของ white space
บรรทัดจะแตกที่อักขระขึ้นบรรทัดใหม่ที่สงวนไว้เท่านั้น

nowrap: ค่านี้จะยุบพื้นที่สีขาวตามnormalแต่จะไม่แสดงตัวแบ่งบรรทัดภายในข้อความ

pre-wrap: ค่านี้ป้องกันตัวแทนผู้ใช้จากการยุบลำดับของ white space
บรรทัดแตกที่อักขระขึ้นบรรทัดใหม่ที่สงวนไว้และตามความจำเป็นในการกรอกข้อมูลลงในกล่องรายการ

pre-line: ค่านี้สั่งให้ตัวแทนผู้ใช้ยุบลำดับของพื้นที่สีขาว
บรรทัดแตกที่อักขระขึ้นบรรทัดใหม่ที่สงวนไว้และตามความจำเป็นในการกรอกข้อมูลลงในกล่องรายการ

(ดูเพิ่มเติมที่แหล่งที่มา )

— ashleedawg
แหล่งที่มา

1

เพียงเพิ่ม: word-break: break-word; ลงในตารางเรียน

— Sajjad Aljileezi
แหล่งที่มา

0

หากคุณต้องการแก้ไขคอลัมน์คุณควรตั้งค่าความกว้าง ตัวอย่างเช่น:

<td style="width:100px;">some data</td>

— ยูจีน
แหล่งที่มา

1

ฉันพยายามที่ ... มันขยายตารางด้วยเหตุผลบางอย่าง <td id = "ความคิดเห็น - $ {comments.id}" class = "wrappable" style = "width: 100px"> $ {comments.comment} </ td >

— Doc Holiday

0

นี่เป็นอีกวิธีหนึ่งในการแก้ปัญหาหากคุณมีสตริงยาว (เช่นชื่อพา ธ ไฟล์) และคุณต้องการแบ่งสตริงเป็นอักขระบางตัวเท่านั้น (เช่นเครื่องหมายทับ) คุณสามารถแทรกอักขระ Unicode Zero Width Spaceก่อน (หรือหลัง) เครื่องหมายสแลชใน HTML

— Mark Lakata
แหล่งที่มา

0

.wrappable { 
      overflow: hidden; 
      max-width: 400px; 
      word-wrap: break-word; 
}

ฉันได้ทดสอบกับข้อมูลไบนารีและทำงานได้อย่างสมบูรณ์ที่นี่

— jaip
แหล่งที่มา

วิธีการบังคับให้เซลล์ของตาราง <td> เนื้อหาห่อ

การสาธิต:

เพิ่มเติมเกี่ยวกับwhite-spaceคุณสมบัติ :

เพิ่มเติมเกี่ยวกับ`white-space`คุณสมบัติ :