Bagaimana cara mengatur lebar sel tabel ke minimum kecuali kolom terakhir?

Saya memiliki meja dengan lebar 100%. Jika saya meletakkan <td>s di dalamnya, kolom tersebut akan tersebar dengan panjang kolom yang sama. Namun, saya ingin semua kolom kecuali yang terakhir memiliki lebar sekecil mungkin, tanpa membungkus teks.

Apa yang saya lakukan pertama kali adalah bahwa saya menetapkan width="1px"semua <td>kecuali yang terakhir (meskipun usang, tetapi style="width:1px"tidak berpengaruh apa pun), yang berfungsi dengan baik sampai saya memiliki data multi-kata di kolom. Dalam hal ini, untuk menjaga panjangnya sekecil mungkin, teks saya dibungkus.

Biar saya tunjukkan. Bayangkan tabel ini:

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

Tidak peduli apa yang saya coba, yang terus saya dapatkan adalah:

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

atau (meskipun saya set style="whitespace-wrap:nowrap") ini:

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

Saya ingin mendapatkan tabel yang saya sajikan terlebih dahulu. Bagaimana saya mencapai ini? (Saya lebih suka tetap berpegang pada standar dan menggunakan CSS. Sejujurnya saya tidak peduli jika IE belum menerapkan bagian dari standar juga)

Penjelasan lebih lanjut: Yang saya butuhkan adalah membuat kolom sesingkat mungkin tanpa membungkus kata (kolom terakhir harus berukuran besar agar lebar tabel benar-benar mencapai 100%). Jika Anda mengetahui LaTeX, yang saya inginkan adalah bagaimana tabel secara alami muncul di LaTeX saat Anda menyetel lebarnya ke 100%.

Catatan: Saya menemukan ini tetapi masih memberi saya yang sama seperti tabel terakhir.

whitespace-wrap: nowrapbukan css yang valid. Itu yang white-space: nowrapAnda cari.

Ini berfungsi di Google Chrome, setidaknya. ( 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%;
}

Dengan menggunakan kode di atas, sel tabel terakhir akan mencoba menjadi sebesar mungkin, dan Anda akan mencegah sel tabel sebelumnya dari pembungkus. Ini sama seperti jawaban lain yang diberikan, tetapi jauh lebih efisien.

Topik yang sedikit berbeda tetapi mungkin membantu seseorang yang tersandung pada pertanyaan ini seperti saya.
_{(Saya baru saja melihat komentar Campbeln yang menyarankan hal ini persis setelah menulis jawaban saya di bawah, jadi ini pada dasarnya adalah penjelasan rinci dari komentarnya)}

Saya memiliki masalah sebaliknya: Saya ingin mengatur satu kolom tabel dengan lebar minimum yang mungkin tanpa merusaknya di ruang putih (kolom terakhir dalam contoh berikut) tetapi lebar yang lain harus dinamis (termasuk jeda baris):

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

Solusi sederhana:

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

Kolom dengan kelas shrinkhanya diperluas ke lebar minimum tetapi yang lain tetap dinamis. Ini bekerja karena widthdari tdsecara otomatis diperluas untuk menyesuaikan seluruh konten.

Contoh Cuplikan

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>

Anda dapat mengatur lebar tetap dengan menempatkan divtag di dalamnyatd

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/

Jika Anda membutuhkan beberapa baris teks dalam sel tabel.

Jangan gunakan white-space: nowrapgunakan white-space: pre;sebagai gantinya.

Dalam sel tabel hindari format kode apa pun seperti baris dan indensi baru (spasi kosong) dan gunakan <br>untuk mengatur baris / baris teks baru. Seperti ini:

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

Demo di CodePen

Kombinasi salah satu white-space: nowrapatau white-space: predengan min-width: <size>akan melakukan pekerjaan itu. width: <size>pada dirinya sendiri tidak cukup untuk menahan meja dari meremas.