CSS: ตัดเซลล์ตารางออก แต่พอดีให้มากที่สุด

พบกับเฟร็ด เขาเป็นโต๊ะ:

<table border="1" style="width: 100%;">
    <tr>
        <td>This cells has more content</td>
        <td>Less content here</td>
    </tr>
</table>

อพาร์ตเมนต์ของ Fred มีนิสัยแปลกประหลาดในการเปลี่ยนขนาดดังนั้นเขาจึงเรียนรู้ที่จะซ่อนเนื้อหาบางส่วนของเขาเพื่อที่จะไม่ผลักดันหน่วยอื่น ๆ ทั้งหมดและผลักห้องนั่งเล่นของนางวิทฟอร์ดออกไปให้อภัย:

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
    <tr>
        <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td>
        <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td>
    </tr>
</table>

วิธีนี้ใช้ได้ผล แต่เฟร็ดมีความรู้สึกที่ดุด่าว่าถ้ามือขวาของเขา (ซึ่งเขาเรียกว่า Celldito) ให้พื้นที่เล็ก ๆ น้อย ๆ เซลล์ด้านซ้ายของเขาจะไม่ถูกตัดทอนมากพอสมควร คุณสามารถช่วยสติของเขา?

โดยสรุป: เซลล์ของตารางจะไหลอย่างเท่าเทียมกันได้อย่างไรและเมื่อพวกเขาได้สละพื้นที่สีขาวทั้งหมดแล้วเท่านั้น

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;">This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

http://jsfiddle.net/7CURQ/

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

คุณสมบัติ :

• ไม่มีจาวาสคริปต์
• ไม่มีเลย์เอาต์ที่แน่นอน
• ไม่มีเทคนิคการถ่วงน้ำหนักหรือเปอร์เซ็นต์ความกว้าง
• ใช้ได้กับคอลัมน์จำนวนเท่าใดก็ได้
• การสร้างฝั่งเซิร์ฟเวอร์อย่างง่ายและการอัพเดทฝั่งไคลเอ็นต์ (ไม่จำเป็นต้องคำนวณ)
• เข้ากันได้ข้ามเบราว์เซอร์

วิธีการทำงาน : ภายในเซลล์ตารางวางสำเนาเนื้อหาสองชุดในองค์ประกอบที่แตกต่างกันสองรายการภายในองค์ประกอบคอนเทนเนอร์ที่อยู่ในตำแหน่งที่ค่อนข้าง องค์ประกอบ spacer อยู่ในตำแหน่งคงที่และจะส่งผลต่อความกว้างของเซลล์ตาราง โดยการอนุญาตให้เนื้อหาของเซลล์ spacer ห่อเราสามารถรับความกว้าง "ดีที่สุด" ของเซลล์ตารางที่เรากำลังมองหา สิ่งนี้ยังช่วยให้เราสามารถใช้องค์ประกอบที่มีตำแหน่งอย่าง จำกัด เพื่อจำกัดความกว้างของเนื้อหาที่มองเห็นได้ให้กับของผู้ปกครองที่ค่อนข้างอยู่ในตำแหน่ง

ผ่านการทดสอบและทำงานใน: IE8, IE9, IE10, Chrome, Firefox, Safari, Opera

ภาพผลลัพธ์ :

JSFiddle : http://jsfiddle.net/zAeA2/

ตัวอย่าง HTML / CSS :

<td>
    <!--Relative-positioned container-->
    <div class="container">
        <!--Visible-->
        <div class="content"><!--Content here--></div>
        <!--Hidden spacer-->
        <div class="spacer"><!--Content here--></div>
        <!--Keeps the container from collapsing without
            having to specify a height-->
        <span>&nbsp;</span>
     </div>
</td>

.container {
    position: relative;
}
.content {
    position: absolute;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spacer {
    height: 0;
    overflow: hidden;
}

ฉันเผชิญกับความท้าทายเดียวกันเมื่อไม่กี่วันที่ผ่านมา ดูเหมือนว่าลูซิเฟอร์แซมจะ พบทางออกที่ดีที่สุด

แต่ฉันสังเกตเห็นว่าคุณควรทำซ้ำเนื้อหาที่องค์ประกอบ spacer คิดว่ามันไม่ได้เลวร้ายนัก แต่ฉันต้องการใช้titleป๊อปอัปสำหรับข้อความที่ถูกตัด และมันหมายถึงข้อความที่มีความยาวจะปรากฏเป็นครั้งที่สามในรหัสของฉัน

ที่นี่ฉันเสนอให้เข้าถึงtitleแอ็ตทริบิวต์จาก:afterองค์ประกอบหลอกเพื่อสร้าง spacer และรักษา HTML ให้สะอาด

ใช้งานได้กับ IE8 +, FF, Chrome, Safari, Opera

<table border="1">
  <tr>
    <td class="ellipsis_cell">
      <div title="This cells has more content">
        <span>This cells has more content</span>
      </div>
    </td>
    <td class="nowrap">Less content here</td>
  </tr>
</table>

.ellipsis_cell > div {
    position: relative;
    overflow: hidden;
    height: 1em;
}

/* visible content */
.ellipsis_cell > div > span {
    display: block;
    position: absolute; 
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1em;
}

/* spacer content */
.ellipsis_cell > div:after {
    content: attr(title);
    overflow: hidden;
    height: 0;
    display: block;
}

http://jsfiddle.net/feesler/HQU5J/

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

ในปัจจุบันสมมติว่าแต่ละเซลล์ปกติจะได้รับความกว้างของแถว 50% และจะยุบเซลล์ด้านขวาเพื่อให้เซลล์ด้านซ้ายมีความกว้างสูงสุดเพื่อหลีกเลี่ยงการล้น คุณสามารถใช้ตรรกะการปรับความกว้างที่ซับซ้อนได้มากขึ้นขึ้นอยู่กับกรณีการใช้งานของคุณ หวังว่านี่จะช่วย:

มาร์กอัปสำหรับแถวที่ฉันใช้ทำการทดสอบ:

<tr class="row">
    <td style="overflow: hidden; text-overflow: ellipsis">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </td>
    <td style="overflow: hidden; text-overflow: ellipsis">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </td>
</tr>

JQuery ที่เชื่อมโยงเหตุการณ์การปรับขนาด:

$(window).resize(function() {
    $('.row').each(function() {
        var row_width = $(this).width();
        var cols = $(this).find('td');
        var left = cols[0];
        var lcell_width = $(left).width();
        var lspan_width = $(left).find('span').width();
        var right = cols[1];
        var rcell_width = $(right).width();
        var rspan_width = $(right).find('span').width();

        if (lcell_width < lspan_width) {
            $(left).width(row_width - rcell_width);
        } else if (rcell_width > rspan_width) {
            $(left).width(row_width / 2);
        }
    });
});

มีวิธีแก้ปัญหาที่ง่ายกว่าและหรูหรากว่ามาก

ภายในตารางเซลล์ที่คุณต้องการใช้การตัดทอนเพียงรวม div คอนเทนเนอร์ด้วย css table-layout: fixed คอนเทนเนอร์นี้ใช้ความกว้างเต็มของเซลล์ตารางพาเรนต์ดังนั้นจึงสามารถตอบสนองได้

ตรวจสอบให้แน่ใจว่าใช้การตัดกับองค์ประกอบในตาราง

ทำงานได้จาก IE8 +

<table>
  <tr>
    <td>
     <div class="truncate">
       <h1 class="truncated">I'm getting truncated because I'm way too long to fit</h1>
     </div>
    </td>
    <td class="some-width">
       I'm just text
    </td>
  </tr>
</table>

และ css:

    .truncate {
      display: table;
      table-layout: fixed;
      width: 100%;
    }

    h1.truncated {
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

นี่คือ Fiddle ที่ใช้งานได้ https://jsfiddle.net/d0xhz8tb/

ปัญหาคือ 'เค้าโครงตาราง: แก้ไข' ซึ่งสร้างคอลัมน์ที่มีความกว้างคงที่และเว้นระยะเท่ากัน แต่การปิดใช้งานคุณสมบัติ css นี้จะฆ่า text-overflow เนื่องจากตารางจะมีขนาดใหญ่ที่สุดเท่าที่จะเป็นไปได้

ฉันขอโทษ แต่ในกรณีนี้เฟร็ดไม่สามารถมีเค้กของเขาและกินเพื่อ .. เว้นแต่เจ้าของบ้านให้ Celldito มีพื้นที่น้อยลงในการทำงานในสถานที่แรกเฟร็ดไม่สามารถใช้ ..

คุณสามารถลอง "น้ำหนัก" คอลัมน์บางคอลัมน์เช่นนี้:

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="80%" />
        <col width="20%" />
    </colgroup>
    <tr>
        <td>This cell has more content.</td>
        <td>Less content here.</td>
    </tr>
</table>

นอกจากนี้คุณยังสามารถลองปรับแต่งที่น่าสนใจเพิ่มเติมเช่นใช้คอลัมน์ความกว้าง 0% และใช้การรวมกันของwhite-spaceคุณสมบัติ CSS

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td>This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

คุณได้รับความคิด

ใช่ฉันจะบอกว่าสามสิบdotมีมันไม่มีวิธีที่จะทำจนกว่าคุณจะใช้วิธีการ js คุณกำลังพูดถึงชุดเงื่อนไขการเรนเดอร์ที่ซับซ้อนซึ่งคุณจะต้องกำหนด เช่นเกิดอะไรขึ้นเมื่อเซลล์ทั้งสองมีขนาดใหญ่เกินไปสำหรับอพาร์ทเมนท์คุณต้องตัดสินใจว่าใครมีความสำคัญหรือเพียงแค่ให้เปอร์เซ็นต์ของพื้นที่และถ้ามีขนาดใหญ่เกินไปทั้งคู่จะใช้พื้นที่นั้นและถ้ามีพื้นที่ว่าง คุณเหยียดขาของคุณในเซลล์อื่น ๆ ไม่ว่าจะด้วยวิธีใดก็ตามด้วย CSS แม้ว่าจะมีบางสิ่งที่ขี้ขลาดคนทำกับ CSS ที่ฉันไม่ได้คิด ฉันสงสัยจริงๆว่าคุณสามารถทำได้

เช่นเดียวกับคำตอบ samplebias อีกครั้งหาก Javascript เป็นคำตอบที่ยอมรับได้ฉันได้สร้างปลั๊กอิน jQuery เพื่อจุดประสงค์นี้โดยเฉพาะ: https://github.com/marcogrcr/jquery-tableoverflow

หากต้องการใช้ปลั๊กอินให้พิมพ์

$('selector').tableoverflow();

ตัวอย่างเต็ม: http://jsfiddle.net/Cw7TD/3/embedded/result/

การแก้ไข:

• แก้ไขใน jsfiddle สำหรับความเข้ากันได้ของ IE
• แก้ไขใน jsfiddle เพื่อความเข้ากันได้กับเบราว์เซอร์ที่ดีขึ้น (Chrome, Firefox, IE8 +)

ใช้แฮ็ค CSS บางอันดูเหมือนว่าdisplay: table-column;สามารถช่วยได้:

<div class="myTable">
    <div class="flexibleCell">A very long piece of content in first cell, long enough that it would normally wrap into multiple lines.</div>
    <div class="staticCell">Less content</div>
</div>

.myTable {
    display: table;
    width: 100%;
}

.myTable:before {
    display: table-column;
    width: 100%;
    content: '';
}

.flexibleCell {
    display: table-cell;
    max-width:1px;
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow: hidden;
}

.staticCell {
    white-space: nowrap;
}

JSFiddle: http://jsfiddle.net/blai/7u59asyp/

เพียงเพิ่มกฎต่อไปนี้ในtd:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// These ones do the trick
width: 100%;
max-width: 0;

ตัวอย่าง:

table {
  width: 100%
}

td {
  white-space: nowrap;
}

.td-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 0;
}

<table border="1">
  <tr>
    <td>content</td>
    <td class="td-truncate">long contenttttttt ttttttttt ttttttttttttttttttttttt tttttttttttttttttttttt ttt tttt ttttt ttttttt tttttttttttt ttttttttttttttttttttttttt</td>
    <td>other content</td>
  </tr>
</table>

PS: ถ้าคุณต้องการที่จะกำหนดความกว้างที่กำหนดเองไปยังอีกสถานที่ให้บริการการใช้งานtdmin-width

คำถามนี้ปรากฏขึ้นด้านบนใน Google ดังนั้นในกรณีของฉันฉันใช้ css snippet จากhttps://css-tricks.com/snippets/css/truncate-string-with-ellipsis/แต่ใช้กับ td ไม่ได้ให้ ผลลัพธ์ที่ต้องการ

ฉันต้องเพิ่มแท็ก div รอบข้อความใน td และจุดไข่ปลาก็ทำงานได้ในที่สุด

รหัส HTML ย่อ

<table style="width:100%">
 <tr>
    <td><div class='truncate'>Some Long Text Here</div></td>
 </tr>
</table>

CSS แบบย่อ

.truncate { width: 300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

ตรวจสอบว่า "nowrap" แก้ปัญหาได้หรือไม่ หมายเหตุ: nowrap ไม่รองรับ HTML5

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
<tr>
    <td style="overflow: hidden; text-overflow: ellipsis;" nowrap >This cells has more content  </td>
    <td style="overflow: hidden; text-overflow: ellipsis;" nowrap >Less content here has more content</td>
</tr>

คุณสามารถตั้งค่าความกว้างของเซลล์ด้านขวาเป็นความกว้างต่ำสุดที่ต้องการจากนั้นใช้ล้นที่ซ่อน + ข้อความล้นในด้านซ้ายของเซลล์ด้านซ้าย แต่ Firefox เป็นรถม้าชนิดเล็กที่นี่ ...

แม้ว่า flexbox สามารถช่วยได้

ฉันได้ทำงานกับมันเมื่อเร็ว ๆ นี้ ลองใช้การทดสอบ jsFiddleนี้ลองเปลี่ยนความกว้างของตารางฐานเพื่อตรวจสอบพฤติกรรม)

ทางออกคือการฝังตารางลงในอีก:

<table style="width: 200px;border:0;border-collapse:collapse">
    <tbody>
        <tr>
            <td style="width: 100%;">
                <table style="width: 100%;border:0;border-collapse:collapse">
                    <tbody>
                        <tr>
                            <td>
                                <div style="position: relative;overflow:hidden">
                                    <p>&nbsp;</p>
                                    <p style="overflow:hidden;text-overflow: ellipsis;position: absolute; top: 0pt; left: 0pt;width:100%">This cells has more content</p>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td style="white-space:nowrap">Less content here</td>
        </tr>
    </tbody>
</table>

ตอนนี้ Fred มีความสุขกับการขยายตัวของ Celldito หรือไม่?

ไม่ทราบว่าจะช่วยได้หรือไม่ แต่ฉันแก้ไขปัญหาที่คล้ายกันโดยระบุขนาดความกว้างเป็นเปอร์เซ็นต์สำหรับแต่ละคอลัมน์ เห็นได้ชัดว่าวิธีนี้จะทำงานได้ดีที่สุดหากแต่ละคอลัมน์มีเนื้อหาที่มีความกว้างซึ่งไม่ได้กว้างเกินไป

ฉันมีปัญหาเดียวกัน แต่ฉันต้องแสดงหลายบรรทัด (ที่text-overflow: ellipsis;ล้มเหลว) ฉันแก้มันโดยใช้textareaด้านในTDและจากนั้นให้มันทำงานเหมือนเซลล์ตาราง

    textarea {
        margin: 0;
        padding: 0;
        width: 100%;
        border: none;
        resize: none;

        /* Remove blinking cursor (text caret) */
        color: transparent;
        display: inline-block;
        text-shadow: 0 0 0 black; /* text color is set to transparent so use text shadow to draw the text */
        &:focus {
            outline: none;
        }
    }

ระบุว่า 'table-layout: fixed' เป็นข้อกำหนดที่จำเป็นในการสร้างคอลัมน์ที่ไม่สามารถปรับระยะห่างได้เท่ากัน แต่คุณต้องสร้างเซลล์ที่มีเปอร์เซ็นต์ความกว้างแตกต่างกันบางทีตั้งค่า 'colspan' ของเซลล์ของคุณเป็นหลาย ๆ

ตัวอย่างเช่นการใช้ความกว้างทั้งหมด 100 เพื่อการคำนวณเปอร์เซ็นต์อย่างง่ายและบอกว่าคุณต้องการหนึ่งเซลล์ 80% และอีก 20% ให้พิจารณา:

<TABLE width=100% style="table-layout:fixed;white-space:nowrap;overflow:hidden;">
     <tr>
          <td colspan=100>
               text across entire width of table
          </td>
     <tr>
          <td colspan=80>
               text in lefthand bigger cell
          </td>
          <td colspan=20>
               text in righthand smaller cell
          </td>
</TABLE>

แน่นอนสำหรับคอลัมน์ 80% และ 20% คุณสามารถตั้งค่าเซลล์คอลัมน์ความกว้าง 100% เป็น 5, 80% ถึง 4 และ 20% ถึง 1