Tablo hücre genişliklerini son sütun dışında minimuma nasıl ayarlayabilirim?

% 100 genişlikte bir masam var. İçine <td>s koyarsam , eşit uzunlukta sütunlarla yayılırlar. Ancak, son dışındaki tüm sütunların metni kaydırmadan mümkün olduğunca küçük bir genişliğe sahip olmasını istiyorum.

İlk yaptığım şey, son hariç (kullanımdan kaldırılmış olmasına rağmen, ancak herhangi bir etkisi olmamasına rağmen width="1px") tüm <td>s'leri ayarlamamdı style="width:1px"; bu, sütunda çok kelimeli veriler olana kadar iyi çalıştı. Bu durumda uzunluğu olabildiğince küçük tutmak için metnimi sardı.

Göstermeme izin verin. Bu tabloyu hayal edin:

---------------------------------------------------------------------------------
element1 | data      | junk here   | last column
---------------------------------------------------------------------------------
elem     | more data | other stuff | again, last column
---------------------------------------------------------------------------------
more     | of        | these       | rows
---------------------------------------------------------------------------------

Ne denersem deneyeyim, almaya devam ettiğim şey ya:

---------------------------------------------------------------------------------
element1         | data             | junk here        | last column
---------------------------------------------------------------------------------
elem             | more data        | other stuff      | again, last column
---------------------------------------------------------------------------------
more             | of               | these            | rows
---------------------------------------------------------------------------------

veya (ayarlamama rağmen style="whitespace-wrap:nowrap") şunu:

---------------------------------------------------------------------------------
         |      | junk  | last
element1 | data |       | 
         |      | here  | column
---------------------------------------------------------------------------------
         | more | other | again,
elem     |      |       | last
         | data | stuff | column
---------------------------------------------------------------------------------
more     | of   | these | rows
---------------------------------------------------------------------------------

Önce sunduğum tabloyu almak istiyorum. Bunu nasıl başarırım? (Standartlara bağlı kalmayı ve CSS kullanmayı tercih ederim. IE'nin de standardın bir bölümünü uygulamamış olması umurumda değil)

Daha fazla açıklama: İhtiyacım olan şey, sözcükleri kaydırmadan sütunları olabildiğince kısa tutmaktır (son sütun, tablo genişliğinin gerçekte% 100'e ulaşması için gerektiği kadar büyük olmalıdır). LaTeX'i biliyorsanız, genişliğini% 100 olarak ayarladığınızda tabloların LaTeX'te doğal olarak nasıl göründüğünü istiyorum.

Not: Bulduğum bu ama yine de bana geçen tablo olarak aynı verir.

whitespace-wrap: nowrapgeçerli css değil. Bu var white-space: nowraparadığınız.

Bu, en azından Google Chrome'da çalışır. ( jsFiddle )

table {
  border: 1px solid green;
  border-collapse: collapse;
  width: 100%;
}

table td {
  border: 1px solid green;
}

table td.shrink {
  white-space: nowrap
}

table td.expand {
  width: 99%
}

<table>
  <tr>
    <td class="shrink">element1</td>
    <td class="shrink">data</td>
    <td class="shrink">junk here</td>
    <td class="expand">last column</td>
  </tr>
  <tr>
    <td class="shrink">elem</td>
    <td class="shrink">more data</td>
    <td class="shrink">other stuff</td>
    <td class="expand">again, last column</td>
  </tr>
  <tr>
    <td class="shrink">more</td>
    <td class="shrink">of </td>
    <td class="shrink">these</td>
    <td class="expand">rows</td>
  </tr>
</table>

td:not(:last-child){
    white-space: nowrap;
}

td:last-child{
    width: 100%;
}

Yukarıdaki kodu kullanarak, son tablo hücresi olabildiğince büyük olmaya çalışacak ve ondan öncekilerin kaydırılmasını engelleyeceksiniz. Bu, verilen diğer cevaplarla aynıdır, ancak çok daha etkilidir.

Biraz farklı konu ama belki bu soruya benim gibi tökezleyen birine yardımcı olabilir.
_{(Cevabımı aşağıya yazdıktan sonra tam olarak bunu öneren Campbeln'in yorumunu az önce gördüm, bu yüzden bu temelde yorumunun ayrıntılı bir açıklamasıdır)}

Problemi tam tersi bir şekilde yaşadım: Bir tablo sütununu beyaz boşlukta (aşağıdaki örnekte son sütun) kırmadan mümkün olan minimum genişliğe ayarlamak istedim, ancak diğerinin genişliği dinamik olmalı (satır sonları dahil):

-----------------------------------------------------------------------------------
element1 | data      | junk here which can   | last column, minimum width, one line
                       span multiple lines
-----------------------------------------------------------------------------------
elem     | more data | other stuff           | again, last column
-----------------------------------------------------------------------------------
more     | of        | these                 | rows
-----------------------------------------------------------------------------------

Basit çözüm:

HTML

<table>
  <tr>
    <td>element1</td>
    <td>data</td>
    <td>junk here which can span multiple lines</td>
    <td class="shrink">last column, minimum width, one line</td>
  </tr>
  <tr>
    <td>elem</td>
    <td>more data</td>
    <td>other stuff</td>
    <td class="shrink">again, last column</td>
  </tr>
  <tr>
    <td>more</td>
    <td>of</td>
    <td>these</td>
    <td class="shrink">rows</td>
  </tr>
</table>

CSS

td.shrink {
  white-space: nowrap;
  width: 1px;
}

Sınıfı olan sütunlar shrinkyalnızca minimum genişliğe genişler, ancak diğerleri dinamik kalır. Bunun nedeni eserler widtharasında tdotomatik tüm içeriği sığdırmak için genişletilir.

Örnek Snippet

table {
  width: 100%;
}

td {
  padding: 10px;
}

td.shrink {
  white-space: nowrap;
  width: 1px;
}

<table>
  <tr>
    <td>element1</td>
    <td>data</td>
    <td>junk here which can span multiple lines</td>
    <td class="shrink">last column, minimum width, one line</td>
  </tr>
  <tr>
    <td>elem</td>
    <td>more data</td>
    <td>other stuff</td>
    <td class="shrink">again, last column</td>
  </tr>
  <tr>
    <td>more</td>
    <td>of</td>
    <td>these</td>
    <td class="shrink">rows</td>
  </tr>
</table>

Sabitleme genişliğini diviçine etiket yerleştirerek ayarlayabilirsiniz.td

table {
    border: 1px solid green;
    border-collapse: collapse;
    width:100%;
}

table td {
    border: 1px solid green;
}

table td:nth-child(1) {
  width: 1%;
}

table td:nth-child(1) div {
  width: 300px;
}

<table>
    <tr>
        <td><div>element1 element1 element1 element1 element1 element1 </div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
    <tr>
        <td><div>element2</div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
    <tr>
        <td><div>element3</div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
</table>

https://jsfiddle.net/8bf17o1v/

Tablo hücresinde birden çok metin satırına ihtiyacınız varsa.

Bunun yerine white-space: nowrapkullanmayın white-space: pre;.

Tablo hücresinde yeni satırlar ve girinti (beyaz boşluk) gibi herhangi bir kod formatından kaçının ve <br>yeni bir metin satırı / satırı ayarlamak için kullanın . Bunun gibi:

<td>element1<br><strong>second row</strong></td>

CodePen'de Demo

İkisinden biri white-space: nowrapveya white-space: preile kombinasyonu min-width: <size>işi yapacak. width: <size>kendi başına masanın sıkışmasını engellemeye yetmez.