Hücrelerindeki metin miktarına bakılmaksızın tablo sütun genişliği sabitini ayarla?

Tablomda bir sütundaki ilk hücrenin genişliğini ayarlayacağım 100px.
Ancak, bu sütundaki hücrenin birindeki metin çok uzun olduğunda, sütunun genişliği daha fazla olur 100px. Bu genişletmeyi nasıl devre dışı bırakabilirim?

Onunla biraz oynadım çünkü çözmekte güçlük çektim.

Sen (ya hücre genişliğini ayarlamak gerekir thya tdben hem set çalıştı) VE set table-layoutiçin fixed. Nedense, hücre genişliği sadece tablo genişliği de ayarlanmışsa sabit kalır gibi görünüyor (bence bu aptalca ama whatev).

Ayrıca, fazladan metnin tablodan çıkmasını önlemek için overflowözelliği ayarlamak yararlıdır hidden.

CSS için tüm sınır ve boyutlandırma işlemlerini de bıraktığınızdan emin olmalısınız.

Tamam işte ne var:

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>

İşte JSFiddle'da

Bu adamın benzer bir sorunu vardı: Tablo hücre genişlikleri - genişlik sabitleme, uzun kelimeleri sarma / kısaltma

Bkz. Http://www.html5-tutorials.org/tables/changing-column-width/

Tablo etiketinden sonra col öğesini kullanın. kapanış etiketine ihtiyacınız yok.

Örneğin, üç sütununuz varsa:

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>

Sadece <div>içine etiket ekleyin <td>veya <th>içindeki genişliği tanımlayın <div>. Bu sana yardım edecek. Başka hiçbir şey çalışmıyor.

Örneğin.

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

Diğer sütunların yeniden boyutlandırılması gerekirken bir veya daha fazla sabit genişlikli sütuna ihtiyacınız varsa, her ikisini de min-widthve max-widthaynı değere ayarlamayı deneyin .

Bunu ilgili CSS içine yazmanız gerekir

table-layout:fixed;

Yaptığım şey:

1. TD genişliğini ayarlayın:

   <td width="200" height="50"><!--blaBlaBla Contents here--></td>

2. Td genişliğini CSS ile ayarlayın:

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

3. CSS ile genişliği tekrar maks ve min olarak ayarlayın:

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

Biraz tekrarlayıcı geliyor ama bana istenen sonucu veriyor. Bunu başarmak için CSS değerlerini stil sayfanızdaki bir sınıfa koymanız gerekebilir:

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

sonra:

<td class="td_size">

Sınıf niteliğini <td>istediğiniz herhangi bir yere yerleştirin .

Bunu kullandım

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

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

Sabit bir düzen istemiyorsanız, sütunun uygun şekilde boyutlandırılması için bir sınıf belirtin.

CSS:

.special_column { width: 120px; }

HTML:

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

Ayrıca, genişlik: otomatik ile son "dolgu hücresi" koymak için yardımcı olur . Bu, kalan alanı kaplayacak ve belirtilen tüm diğer boyutları bırakacaktır.

Sabit genişlikten küçük olduğunda kabul edilen cevabın küçük ekranlar için yanıt vermesini sağlayın.

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/

Bunu ayarlama:

style="min-width:100px;" 

Benim için çalıştı.

KAsun doğru fikre sahip. İşte doğru kod ...

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

Cevabım gereğince burada , bir kullanmak da mümkündür masa başını (boş olabilir) ve her tablo kafa hücre için nispi genişlikleri geçerlidir. Tablo gövdesindeki tüm hücrelerin genişlikleri sütun başlıklarının genişliğine uyacaktır. Misal:

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

Sonucu göster

Alternatif olarak, colgroupHyathin'in cevabında önerildiği gibi kullanın .

Ben mevcut metin ne olursa olsun, asgari genişlik ayarlamak istediğiniz hücrede bir :: after öğesi kullanın:

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

Tablo üst öğesinde genişlik ayarlamam veya tablo düzeni kullanmam gerekmiyor.

KAsun'un cevabının px yerine vw kullanarak daha iyi çalıştığını gördüm :

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

Sütun genişliğini ayarlamak için ihtiyacım olan tek stil buydu

Ayarlamanız gerekmez "fixed"- overflow:hiddensütun genişliği ayarlandığından tek yapmanız gereken ayar yapmaktır .