Di meja saya, saya mengatur lebar sel pertama dalam kolom untuk menjadi 100px
.
Namun, ketika teks dalam salah satu sel pada kolom ini terlalu panjang, lebar kolom menjadi lebih dari 100px
. Bagaimana aku bisa menonaktifkan ekspansi ini?
Saya bermain dengan itu untuk sedikit karena saya mengalami kesulitan mencari jalan keluar.
Anda perlu untuk mengatur lebar sel (baik th
atau td
bekerja, saya set kedua) DAN mengatur table-layout
untuk tetap
. Untuk beberapa alasan, sel lebar tampaknya hanya tinggal tetap jika meja lebar yang ditetapkan, juga (saya berpikir bahwa's konyol tapi whatev).
Juga, hal ini berguna untuk mengatur overflow
properti tersembunyi
untuk mencegah teks tambahan dari keluar dari meja.
Anda harus pastikan untuk meninggalkan semua yang berbatasan dan sizing untuk CSS, juga.
Ok jadi di sini's apa yang saya miliki:
table {
border: 1px solid black;
table-layout: fixed;
width: 200px;
}
th,
td {
border: 1px solid black;
width: 100px;
overflow: hidden;
}
<table>
<tr>
<th>header 1</th>
<th>header 234567895678657</th>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
</table>
[Di sini adalah di JSFiddle][1]
Orang ini memiliki masalah yang sama: https://stackoverflow.com/q/446624/534056
Lihat: http://www.html5-tutorials.org/tables/changing-column-width/
Setelah tag tabel, gunakan col elemen. anda don't membutuhkan tag penutup.
Misalnya, jika anda memiliki tiga kolom:
<table>
<colgroup>
<col style="width:40%">
<col style="width:30%">
<col style="width:30%">
</colgroup>
<tbody>
...
</tbody>
</table>
Apa yang saya lakukan adalah:
Kedengarannya sedikit berulang-ulang tapi itu memberi saya hasil yang diinginkan. Untuk mencapai hal ini dengan banyak kemudahan, anda mungkin perlu menempatkan nilai CSS di kelas dalam gaya anda-lembar:
.td_size {
width:200px;
height:50px;
max-width:200px;
min-width:200px;
max-height:50px;
min-height:50px;
**overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/
}
maka:
<td class="td_size">
Tempat atribut class untuk setiap <td>
yang anda inginkan.
Saya menggunakan ini
.app_downloads_table tr td:first-child {
width: 75%;
}
.app_downloads_table tr td:last-child {
text-align: center;
}
Pengaturan ini:
style="min-width:100px;"
Bekerja untuk saya.
Sesuai jawaban saya di sini, hal ini juga mungkin untuk menggunakan meja kepala (bisa kosong) dan menerapkan relatif lebar untuk meja masing-masing kepala sel. Lebar dari semua sel-sel dalam tabel tubuh akan menyesuaikan dengan lebar kolom mereka kepala. Contoh:
HTML
<table>
<thead>
<tr>
<th width="5%"></th>
<th width="70%"></th>
<th width="15%"></th>
<th width="10%"></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Some text...</td>
<td>May 2018</td>
<td>Edit</td>
</tr>
<tr>
<td>2</td>
<td>Another text...</td>
<td>April 2018</td>
<td>Edit</td>
</tr>
</tbody>
</table>
CSS
table {
width: 600px;
border-collapse: collapse;
}
td {
border: 1px solid #999999;
}
Atau, gunakan colgroup
seperti yang disarankan di Hyathin's jawaban.
KAsun memiliki ide yang tepat. Berikut adalah kode yang benar...
<style type="text/css">
th.first-col > div,
td.first-col > div {
overflow:hidden;
white-space:nowrap;
width:100px
}
</style>
<table>
<thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
<tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>
Membuat jawaban yang diterima merespon untuk layar kecil ketika lebih kecil dari lebar tetap.
HTML:
<table>
<tr>
<th>header 1</th>
<th>header 234567895678657</th>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
</table>
CSS
table{
border: 1px solid black;
table-layout: fixed;
max-width: 600px;
width: 100%;
}
th, td {
border: 1px solid black;
overflow: hidden;
max-width: 300px;
width: 100%;
}
JS Fiddle
Saya menemukan KAsun's jawaban yang bekerja lebih baik menggunakan vw bukan px seperti:
<td><div style="width: 10vw" >...............</div></td>
Ini adalah satu-satunya gaya yang saya butuhkan untuk menyesuaikan lebar kolom