Paskan lebar sel dengan konten

Dengan markup berikut, bagaimana saya bisa menggunakan CSS untuk memaksa satu sel (semua sel dalam kolom) agar sesuai dengan lebar konten di dalamnya daripada peregangan (yang merupakan perilaku default)?

<style type="text/css">
td.block
{
border: 1px solid black;
}
</style>
<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

EDIT: Saya sadar saya bisa mengkodekan lebar, tapi saya lebih suka tidak melakukannya, karena konten yang akan masuk dalam kolom itu dinamis.

Melihat gambar di bawah, gambar pertama adalah apa yang dihasilkan markup. Gambar kedua adalah apa yang saya inginkan.

Saya tidak yakin apakah saya mengerti pertanyaan Anda, tetapi saya akan menusuknya. JSfiddle dari contoh .

HTML:

<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

CSS:

td{
    border:1px solid #000;
}

tr td:last-child{
    width:1%;
    white-space:nowrap;
}

Pengaturan

max-width:100%;
white-space:nowrap;

akan menyelesaikan masalah Anda.

Bagi saya, ini adalah autofit dan autoresize terbaik untuk tabel dan kolomnya (gunakan css! Penting ... hanya jika Anda tidak bisa melakukannya)

.myclass table {
    table-layout: auto !important;
}

.myclass th, .myclass td, .myclass thead th, .myclass tbody td, .myclass tfoot td, .myclass tfoot th {
    width: auto !important;
}

Jangan menentukan lebar css untuk tabel atau kolom tabel. Jika konten tabel lebih besar maka akan melampaui ukuran layar.

Mengatur lebar CSS menjadi 1% atau 100% elemen sesuai dengan semua spesifikasi yang bisa saya temukan terkait dengan induknya. Meskipun Blink Rendering Engine (Chrome) dan Gecko (Firefox) pada saat penulisan tampaknya menangani bahwa 1% atau 100% (membuat kolom menyusut atau kolom untuk mengisi ruang yang tersedia) dengan baik, itu tidak dijamin sesuai dengan semua spesifikasi CSS Saya dapat menemukan untuk membuatnya dengan benar.

Salah satu opsi adalah mengganti tabel dengan CSS4 flex divs:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Itu bekerja di browser baru yaitu IE11 + lihat tabel di bagian bawah artikel.

Ada banyak cara untuk melakukan ini!

koreksi saya jika saya salah tetapi pertanyaannya adalah mencari hasil seperti ini.

<table style="white-space:nowrap;width:100%;">
<tr>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:auto">this should be the content width</td>
</tr>
</table>

2 bidang pertama akan "berbagi" halaman yang tersisa (CATATAN: jika Anda menambahkan lebih banyak teks ke 50% bidang, itu akan mengambil lebih banyak ruang), dan bidang terakhir akan mendominasi tabel secara konstan.

Jika Anda senang membiarkan pembungkus teks, Anda dapat memindahkan ruang putih: nowrap; dengan gaya bidang ke-3
akan menjadi satu-satunya cara untuk memulai baris baru di bidang itu.

sebagai alternatif, Anda dapat mengatur panjang pada bidang terakhir yaitu. lebar: 150px, dan biarkan persentase di 2 bidang pertama.

Semoga ini membantu!

Sederhana:

    <div style='overflow-x:scroll;overflow-y:scroll;width:100%;height:100%'>