Bagaimana cara mengatur lebar maksimal sel tabel menggunakan persentase?

100 
<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
td{max-width:67%;}
</style>

Di atas tidak berhasil. Bagaimana cara mengatur lebar maksimal sel tabel menggunakan persentase?

html css html-table Leo Jiang
sumber
Harap kembangkan "tidak berfungsi" .
Sparky
1
Anda harus memastikan PARENT dari td Anda memiliki lebar tertentu (baik itu Anda memberikan lebar: 100%; dari body ke td Anda, atau Anda dapat memberikan parent (di sini: tr) 1000px atau apapun yang Anda inginkan . Saat menggunakan %% di css, ia selalu menggunakan piksel persis seperti yang ditentukan di induk dan kemudian mengubah piksel menjadi %% untuk anak-anak, karena mereka memiliki ukuran yang relatif terhadap induknya.
Philipp Meissner
Sebagai catatan, max-width sekarang berfungsi di Safari dan Chrome. Saya tidak yakin sudah berapa lama ini didukung.
Yakub

Jawaban:

71

Menurut definisi lebar-maks dalam spesifikasi CSS 2.1, “efek 'lebar-minimum' dan 'lebar-maksimal' pada tabel, tabel sebaris, sel tabel, kolom tabel, dan grup kolom tidak ditentukan.” Jadi Anda tidak bisa langsung mengatur max-width pada elemen td.

Jika Anda hanya ingin kolom kedua mengambil paling banyak 67%, maka Anda dapat mengatur lebar (yang berlaku lebar minimum, untuk sel tabel) menjadi 33%, misalnya dalam kasus contoh

td:first-child { width: 33% ;}

Pengaturan untuk kedua kolom tidak akan bekerja dengan baik, karena cenderung membuat browser memberikan lebar kolom yang sama.

Jukka K. Korpela
sumber
Sebenarnya max-width berfungsi di Safari dan Chrome sekarang. Saya tidak yakin sudah berapa lama ini didukung.
Yakub
114

Pertanyaan lama yang saya tahu, tetapi sekarang ini dapat dilakukan dengan menggunakan properti css table-layout: fixedpada tag tabel. Jawaban di bawah dari pertanyaan ini, lebar persentase CSS dan luapan teks dalam sel tabel

Ini mudah dilakukan dengan menggunakan table-layout: fixed, tetapi sedikit rumit karena tidak banyak orang yang mengetahui tentang properti CSS ini.

table {
  width: 100%;
  table-layout: fixed;
}

Lihat aksinya di biola yang diperbarui di sini: http://jsfiddle.net/Fm5bM/4/

superphonic
sumber
2
Terima kasih! Saya takut diperbaiki berarti itu tidak akan menghitung ulang lebar sel yang tidak memiliki set lebar apa pun, tetapi untungnya bukan itu masalahnya.
fassl
4
Di jsfiddle Anda jika saya menghapus properti lebar, lebar-maks masih tidak berfungsi jadi tidak yakin bagaimana ini menyelesaikan masalah.
frezq
4
@uperonic Saya pikir Anda bingung. Jika Anda menghapus max-widthdi jsfiddle itu, lebarnya akan tetap sama jadi bukan max-widthyang mengaturnya. Mungkin lebih jelas jika Anda menggantinya dengan a max-width: 10%untuk yang pertama td... Anda akan melihat bahwa itu tidak berubah. jsfiddle.net/w3f8ey22/1
frezq
4
table-layout: fixed tidak menyelesaikan masalah OP. Itu tidak secara ajaib membuat 'min-width' berfungsi pada sel tabel. Kedua biola yang direferensikan tidak memiliki perbedaan dalam tampilan jika table-layout: fixed dihapus.
cmerriman
2
jawaban ini menyesatkan karena tidak terkait dengan pertanyaan
Zoltán Süle
8

Saya tahu ini benar-benar setahun kemudian, tetapi saya pikir saya akan berbagi. Saya mencoba melakukan hal yang sama dan menemukan solusi yang berhasil untuk saya. Kami menetapkan lebar maksimal untuk seluruh tabel, lalu bekerja dengan ukuran sel untuk efek yang diinginkan.

Letakkan tabel di div-nya sendiri, lalu atur lebar, min-width, dan / atau max-width dari div seperti yang diinginkan untuk seluruh tabel. Kemudian, Anda dapat bekerja dan mengatur lebar dan lebar-min untuk sel lain, dan lebar maksimum untuk div secara efektif bekerja di sekitar dan ke belakang untuk mencapai lebar maksimal yang kita inginkan.

<div id="tablediv">
<table width="100%">
 <tr>
  <td class="tdleft">Test</td>
  <td>A long string blah blah blah</td>
 </tr>
</table>
</div>

Kemudian dalam gaya Anda taruh:

#tablediv {
    width:90%;
    min-width:800px
    max-width:1500px;
}
.tdleft {
    width:20%;
    min-width:200px;
}

Memang, ini tidak memberi Anda lebar "maks" dari sel itu sendiri, tetapi memungkinkan beberapa kontrol yang mungkin bekerja sebagai pengganti opsi semacam itu. Tidak yakin apakah itu akan bekerja untuk kebutuhan Anda. Saya tahu itu berfungsi untuk situasi kami di mana kami ingin sisi navigasi di halaman skala naik dan turun ke satu titik tetapi untuk semua layar lebar hari ini.

Damon
sumber
0

persen harus relatif terhadap ukuran absolut, coba ini:

<table>
<tr>
<td>Testasdas 3123 1 dasd as da</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
table{width:200px;}
td{width:65%;border:1px solid black;}
</style>
dov.amir
sumber