Tetapkan lebar kolom tabel konstan terlepas dari jumlah teks dalam selnya?


535

Di meja saya, saya mengatur lebar sel pertama menjadi satu kolom 100px.
Namun, ketika teks di salah satu sel di kolom ini terlalu panjang, lebar kolom menjadi lebih dari 100px. Bagaimana saya bisa menonaktifkan ekspansi ini?


5
stackoverflow.com/questions/1258416/word-wrap-in-a-html-table dapat membantu mengarahkan Anda ke arah yang benar
justinl

2
Dalam kasus saya tidak terjadi ekspansi, tetapi sebaliknya: penyusutan lebar yang tidak diinginkan meskipun deklarasi lebar eksplisit saya. Konyol!
Csaba Toth

Satu-satunya solusi yang benar untuk ini adalah menggunakan colgroup dengan cols di dalamnya, dan mengatur lebar cols.
MightyPork

table-layout:fixed;adalah solusinya
emfi

Jawaban:


607

Saya bermain dengannya sebentar karena saya kesulitan mengatasinya.

Anda perlu mengatur lebar sel (baik thatau tdberfungsi, saya atur keduanya) DAN mengatur table-layoutke fixed. Untuk beberapa alasan, lebar sel tampaknya hanya tetap jika lebar tabel diatur juga (saya pikir itu konyol tapi whatev).

Juga, berguna untuk mengatur overflowproperti hiddenagar tidak ada teks tambahan yang keluar dari tabel.

Anda harus memastikan untuk meninggalkan semua batas dan ukuran untuk CSS juga.

Ok jadi inilah 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>

Ini dia di JSFiddle

Orang ini memiliki masalah yang sama: Lebar sel tabel - lebar memperbaiki, membungkus / memotong kata-kata panjang


77
Penting untuk memperhatikan ini: "Browser kemudian akan menetapkan lebar kolom berdasarkan lebar sel di baris pertama tabel", dari stackoverflow.com/questions/570154/…
daniloquio

12
Itu berfungsi ketika lebar tabel tidak diperbaiki. jsfiddle.net/lavinski/CGCFW/3 Anda hanya perlu baris dinamis untuk mengambil ruang yang tersisa.
Daniel Little

2
@DanielLittle atau Anda dapat mengatur lebar tabel menjadi 1px; dengan overflow: visibleuntuk tabel ukuran dinamis, selama ukuran sel tetap dan melimpah terlihat tidak masalah jika ukuran tabel itu sendiri lebih besar atau lebih kecil dari sel yang sebenarnya.
Mahn

Apa yang bisa Anda lakukan jika td Anda memiliki "width = 30%;"?
71GA

Silakan tambahkan overflow: hidden @ RokoC.Buljan
Alex Grande

178

Lihat: http://www.html5-tutorials.org/tables/changing-column-width/

Setelah tag tabel, gunakan elemen col. Anda tidak perlu 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>

26
Ini! Ini adalah jawaban HTML5 dan ini sangat berhasil tanpa saya harus melewati rintangan bodoh. Plus Anda dapat menggunakan <col class = "someClassName"> sebagai gantinya untuk menjaga lebar Anda di CSS dan tidak mencemari HTML Anda dengan info gaya.
John Munsch

2
@ Sam, Anda mungkin memiliki masalah lain yang menimpa ini seperti CSS, gaya sebaris, atau salah ketik dll. Ini pasti berfungsi, itu cara standar untuk mengatur gaya kolom.
Sameer Alibhai

Saya tidak yakin apakah ini adalah 'cara HTML5' sama sekali. Tampaknya colgroup / col di html5 hanya benar-benar digunakan untuk menandai rentang. MDN tidak menyebutkan penggunaan atribut style pada tag col (selain mewarisinya dari atribut global) dan hanya mengatakan tentang bgcolor: "... gunakan properti CSS ... pada elemen <td> yang relevan." developer.mozilla.org/en-US/docs/Web/HTML/Element/col .
Stephen Panzer

5
Bekerja untuk saya dengan gaya meja table-layout: fixed; width: 100%;. Terima kasih!
nrodic

Ini bukan end-all / definitive, tetapi w3schools juga tidak menyebutkan penggunaan colini. Ini menyarankan penggunaan css yang diterapkan pada <td>(atau a <th) - w3schools.com/tags/att_td_width.asp
Don Cheadle

128

Cukup tambahkan <div>tag di dalamnya <td>atau <th>tentukan lebar di dalamnya <div>. Ini akan membantu Anda. Tidak ada lagi yang berhasil.

misalnya.

<td><div style="width: 50px" >...............</div></td>

2
Saya menggabungkan solusi ini dengan juga menentukan min-width / max-width untuk lebar piksel yang sama agar aman. Akhirnya berhasil. Saya tidak tahu mengapa saya harus menjalankan semua putaran tambahan ini hanya membuatnya benar-benar tetap, konyol ...
Csaba Toth

1
Tidak yakin bagaimana ini lebih baik daripada menetapkan css yang sama style="width: 50px"pada<td>
Don Cheadle

2
@mmcrae Lebih baik karena berfungsi, mengatur lebar <td>tidak aktif .
Madbreak

66

Jika Anda membutuhkan satu kolom lagi dengan lebar tetap lebih banyak sementara kolom lainnya harus diubah ukurannya, coba atur keduanya min-widthdan max-widthke nilai yang sama.


Ini bekerja untuk saya ketika mengatur lebar secara eksplisit dengan table-layout: fixed;tidak.
Jordan Mack

Sial! Tidak ada solusi lain yang berfungsi atau terlalu kikuk! Ini bekerja dengan sempurna! Tidak diperlukan div juga!
NeilRoy

29

Anda perlu menulis ini di dalam CSS yang sesuai

table-layout:fixed;

tabel sorround yang lebih baik dengan tag div kemudian di dalam div menggunakan overflow: auto
vinoth kumar

Bekerja untuk saya ketika saya menggabungkannya dengan grup kolom: <table style = "table-layout: fixed"> <colgroup> <col style = "width: 50%"> <col style = "width: 50%"> </ colgroup> <tbody> ... </tbody> </table>.
Russ Bateman

Artikel Chris Coyer ini menjelaskan dengan baik: css-tricks.com/fixing-tables-long-strings
cssyphus

24

Apa yang saya lakukan adalah:

  1. Atur lebar td:

    <td width="200" height="50"><!--blaBlaBla Contents here--></td>
  2. Atur lebar td dengan CSS:

    <td style="width:200px; height:50px;">
  3. Tetapkan lagi lebar sebagai maks dan min dengan CSS:

    <td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">

Kedengarannya sedikit berulang tetapi memberi saya hasil yang diinginkan. Untuk mencapai ini dengan sangat mudah, Anda mungkin perlu meletakkan nilai-nilai CSS di kelas di style-sheet Anda:

.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*/   
}

kemudian:

<td class="td_size">

Tempatkan atribut kelas ke apa pun yang <td>Anda inginkan.


Ini adalah satu-satunya solusi yang tampaknya berhasil dalam semua kasus tanpa memaksakan pembatasan tambahan yang berpotensi tidak diinginkan.
Sam

3

Saya menggunakan ini

.app_downloads_table tr td:first-child {
    width: 75%;
}

.app_downloads_table tr td:last-child {
    text-align: center;
}

Jangan lupa ntch-child (2) (atau 3, 4 dan seterusnya)

tabel td nth-child (n +1) {...} akan mencakup semua kecuali kolom pertama
Ed Randall

2

Jika Anda tidak menginginkan tata letak yang tetap, tentukan kelas untuk ukuran kolom yang sesuai.

CSS:

.special_column { width: 120px; }

HTML:

<td class="special_column">...</td>

2

Ini juga membantu, untuk memasukkan "sel pengisi" terakhir, dengan lebar: otomatis . Ini akan menempati ruang yang tersisa, dan akan meninggalkan semua dimensi lain seperti yang ditentukan.


2

Buat jawaban yang diterima merespons 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

https://jsfiddle.net/w9s3ebzt/



1

Asun memiliki ide yang tepat. Ini 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>

1

Sesuai jawaban saya di sini , juga dimungkinkan untuk menggunakan kepala tabel (yang dapat kosong) dan menerapkan lebar relatif untuk setiap sel kepala tabel. Lebar semua sel dalam tubuh tabel akan sesuai dengan lebar kepala kolomnya. 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;
}

Lihat hasil

Atau, gunakan colgroupseperti yang disarankan dalam jawaban Hyathin.


0

Saya menggunakan elemen :: after di sel tempat saya ingin menetapkan lebar minimal terlepas dari teks yang ada, seperti ini:

.cell::after {
    content: "";
    width: 20px;
    display: block;
}

Saya tidak perlu mengatur lebar pada induk tabel atau menggunakan tata letak tabel.


-4

Saya menemukan jawaban KAsun bekerja lebih baik menggunakan vw daripada px seperti:

<td><div style="width: 10vw" >...............</div></td>

Ini adalah satu-satunya gaya yang saya butuhkan untuk menyesuaikan lebar kolom


-5

Anda tidak perlu mengatur "fixed"- semua yang Anda butuhkan adalah pengaturan overflow:hiddenkarena lebar kolom diatur.


3
Yang akan menyembunyikan konten di balik batas sel, bukan ide yang baik.
Mystrdat
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.