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

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?

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

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>

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>

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.

Anda perlu menulis ini di dalam CSS yang sesuai

table-layout:fixed;

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.

Saya menggunakan ini

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

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

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>

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.

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/

Pengaturan ini:

style="min-width:100px;" 

Bekerja untukku.

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>

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.

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.

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

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