ฉันจะตั้งค่าความกว้างของเซลล์ตารางให้ต่ำสุดยกเว้นคอลัมน์สุดท้ายได้อย่างไร

ฉันมีโต๊ะที่มีความกว้าง 100% ถ้าผมใส่<td>s เข้าไปพวกมันจะกระจายออกโดยมีคอลัมน์ที่ยาวเท่ากัน อย่างไรก็ตามฉันต้องการให้คอลัมน์ทั้งหมดยกเว้นสุดท้ายมีความกว้างน้อยที่สุดโดยไม่ต้องตัดข้อความ

สิ่งที่ฉันทำก่อนอื่นคือฉันตั้งค่าwidth="1px"ในทุกคำ<td>ยกเว้นครั้งสุดท้าย (แม้ว่าจะเลิกใช้แล้ว แต่style="width:1px"ก็ไม่มีผลใด ๆ ) ซึ่งทำงานได้ดีจนกว่าฉันจะมีข้อมูลหลายคำในคอลัมน์ ในกรณีนี้เพื่อให้ความยาวเล็กที่สุดมันจะห่อข้อความของฉัน

ให้ฉันสาธิต ลองนึกภาพตารางนี้:

---------------------------------------------------------------------------------
element1 | data      | junk here   | last column
---------------------------------------------------------------------------------
elem     | more data | other stuff | again, last column
---------------------------------------------------------------------------------
more     | of        | these       | rows
---------------------------------------------------------------------------------

ไม่ว่าฉันจะพยายามยังไงสิ่งที่ฉันได้รับก็คือ:

---------------------------------------------------------------------------------
element1         | data             | junk here        | last column
---------------------------------------------------------------------------------
elem             | more data        | other stuff      | again, last column
---------------------------------------------------------------------------------
more             | of               | these            | rows
---------------------------------------------------------------------------------

หรือ (แม้ว่าฉันจะตั้งค่าstyle="whitespace-wrap:nowrap") สิ่งนี้:

---------------------------------------------------------------------------------
         |      | junk  | last
element1 | data |       | 
         |      | here  | column
---------------------------------------------------------------------------------
         | more | other | again,
elem     |      |       | last
         | data | stuff | column
---------------------------------------------------------------------------------
more     | of   | these | rows
---------------------------------------------------------------------------------

ฉันต้องการที่จะได้รับตารางที่ฉันนำเสนอก่อน ฉันจะบรรลุเป้าหมายนี้ได้อย่างไร? (ฉันอยากจะยึดติดกับมาตรฐานและการใช้ CSS ฉันไม่สนใจว่า IE ไม่ได้ใช้ส่วนหนึ่งของมาตรฐานด้วย)

คำอธิบายเพิ่มเติม: สิ่งที่ฉันต้องการคือทำให้คอลัมน์สั้นที่สุดโดยไม่ต้องตัดคำ (คอลัมน์สุดท้ายควรมีขนาดใหญ่เท่าที่จำเป็นเพื่อให้ความกว้างของตารางถึง 100%) ถ้าคุณรู้จัก LaTeX สิ่งที่ฉันต้องการคือตารางจะปรากฏใน LaTeX อย่างไรเมื่อคุณตั้งค่าความกว้างเป็น 100%

หมายเหตุ: ฉันพบสิ่งนี้แต่ก็ยังคงให้ฉันเหมือนตารางสุดท้าย

whitespace-wrap: nowrapcss ไม่ถูกต้อง มันเป็นเรื่องwhite-space: nowrapที่คุณกำลังมองหา

สิ่งนี้ใช้ได้ใน Google Chrome อย่างน้อย ( jsFiddle )

table {
  border: 1px solid green;
  border-collapse: collapse;
  width: 100%;
}

table td {
  border: 1px solid green;
}

table td.shrink {
  white-space: nowrap
}

table td.expand {
  width: 99%
}

<table>
  <tr>
    <td class="shrink">element1</td>
    <td class="shrink">data</td>
    <td class="shrink">junk here</td>
    <td class="expand">last column</td>
  </tr>
  <tr>
    <td class="shrink">elem</td>
    <td class="shrink">more data</td>
    <td class="shrink">other stuff</td>
    <td class="expand">again, last column</td>
  </tr>
  <tr>
    <td class="shrink">more</td>
    <td class="shrink">of </td>
    <td class="shrink">these</td>
    <td class="expand">rows</td>
  </tr>
</table>

td:not(:last-child){
    white-space: nowrap;
}

td:last-child{
    width: 100%;
}

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

หัวข้อที่แตกต่างกันเล็กน้อย แต่อาจช่วยคนที่สะดุดกับคำถามนี้เหมือนฉัน
_{(ฉันเพิ่งเห็นความคิดเห็นของ Campbeln ที่แนะนำสิ่งนี้หลังจากเขียนคำตอบของฉันด้านล่างดังนั้นนี่คือคำอธิบายโดยละเอียดเกี่ยวกับความคิดเห็นของเขา)}

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

-----------------------------------------------------------------------------------
element1 | data      | junk here which can   | last column, minimum width, one line
                       span multiple lines
-----------------------------------------------------------------------------------
elem     | more data | other stuff           | again, last column
-----------------------------------------------------------------------------------
more     | of        | these                 | rows
-----------------------------------------------------------------------------------

วิธีง่ายๆ:

HTML

<table>
  <tr>
    <td>element1</td>
    <td>data</td>
    <td>junk here which can span multiple lines</td>
    <td class="shrink">last column, minimum width, one line</td>
  </tr>
  <tr>
    <td>elem</td>
    <td>more data</td>
    <td>other stuff</td>
    <td class="shrink">again, last column</td>
  </tr>
  <tr>
    <td>more</td>
    <td>of</td>
    <td>these</td>
    <td class="shrink">rows</td>
  </tr>
</table>

CSS

td.shrink {
  white-space: nowrap;
  width: 1px;
}

คอลัมน์ที่มีคลาสshrinkจะขยายเป็นความกว้างต่ำสุดเท่านั้น แต่คอลัมน์อื่น ๆ จะยังคงเป็นแบบไดนามิก งานนี้เพราะwidthของtdถูกขยายโดยอัตโนมัติเพื่อให้พอดีกับเนื้อหาทั้งหมด

ตัวอย่าง Snippet

table {
  width: 100%;
}

td {
  padding: 10px;
}

td.shrink {
  white-space: nowrap;
  width: 1px;
}

<table>
  <tr>
    <td>element1</td>
    <td>data</td>
    <td>junk here which can span multiple lines</td>
    <td class="shrink">last column, minimum width, one line</td>
  </tr>
  <tr>
    <td>elem</td>
    <td>more data</td>
    <td>other stuff</td>
    <td class="shrink">again, last column</td>
  </tr>
  <tr>
    <td>more</td>
    <td>of</td>
    <td>these</td>
    <td class="shrink">rows</td>
  </tr>
</table>

คุณสามารถตั้งค่าความกว้างของการแก้ไขได้โดยวางdivแท็กไว้ด้านในtd

table {
    border: 1px solid green;
    border-collapse: collapse;
    width:100%;
}

table td {
    border: 1px solid green;
}

table td:nth-child(1) {
  width: 1%;
}

table td:nth-child(1) div {
  width: 300px;
}

<table>
    <tr>
        <td><div>element1 element1 element1 element1 element1 element1 </div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
    <tr>
        <td><div>element2</div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
    <tr>
        <td><div>element3</div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
</table>

https://jsfiddle.net/8bf17o1v/

หากคุณต้องการข้อความหลายบรรทัดในเซลล์ตาราง

อย่าใช้white-space: nowrapใช้white-space: pre;แทน

ในเซลล์ตารางหลีกเลี่ยงรูปแบบโค้ดเช่นบรรทัดใหม่และการเยื้อง (เว้นวรรค) และใช้<br>เพื่อตั้งค่าบรรทัด / แถวข้อความใหม่ แบบนี้:

<td>element1<br><strong>second row</strong></td>

สาธิตเกี่ยวกับ CodePen

การผสมผสานระหว่างอย่างใดอย่างหนึ่งwhite-space: nowrapหรือwhite-space: preด้วยmin-width: <size>จะได้ผล width: <size>ตัวมันเองไม่เพียงพอที่จะยึดโต๊ะจากการบีบ