Paskan lebar sel dengan konten

266

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.

masukkan deskripsi gambar di sini

html css html-table

— Mansfield
sumber

Saya tidak mengerti pertanyaan Anda. Apakah Anda ingin membatasi kolom terakhir sebagai lebar tertentu?

— MetalFrog

8

@diEcho saya pikir itu cukup jelas. Saya akan menambahkan satu atau dua gambar.

— Mansfield

Kemungkinan duplikat kolom tabel CSS autowidth

— Vadzim

451

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

— MetalFrog
sumber

3

mengapa Anda menulis <table style="width:100%">alih-alih<table width="100%" >

— diEcho

17

@diEcho Saya tidak menulis bagian itu, itu dari kode contoh. Apapun, itu adalah praktik yang buruk untuk menggunakan atribut lebar pada elemen. Dalam contoh cepat ini, CSS sebaris baik-baik saja, tetapi harus diabstraksi menjadi file jika ini adalah kode tingkat produksi.

— MetalFrog

45

Cara yang lebih bersih untuk melakukan IMO ini adalah dengan mendefinisikan gaya yang disebut "nostretch" (atau sesuatu seperti itu), dan kemudian hanya mendefinisikan nostretch di CSS untuk memiliki lebar: 1% dan nowrap. Maka TD terakhir akan memiliki 'class = "nostretch block"'. Dengan cara itu Anda bisa "menyumbat" sel yang Anda inginkan.

— Tim Holt

3

Ini adalah solusi yang baik, tetapi sayangnya, di Bootstrap 3 grup tombol saya akan membungkus ini: jsfiddle.net/wexdX/326 Ada ide bagaimana saya bisa menekannya?

— Martin Braun

5

Ini hanya berfungsi ketika konten lebih lebar dari lebar: 1% - benar? Karena jika konten lebih kecil dari lebar: 1%, sel akan lebih besar.

— Adam

44

Pengaturan

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

akan menyelesaikan masalah Anda.

— Shubham Nigam
sumber

8

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.

— myset
sumber

3

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.

— Mladen Adamovic
sumber

1

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!

— Christian Newman
sumber

-1

Sederhana:

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

— Parth Jani
sumber