Hücre genişliğini içeriğe sığdır

266

Aşağıdaki biçimlendirme göz önüne alındığında, bir hücreyi (sütundaki tüm hücreler) genişletmek yerine (varsayılan davranış olan) içeriğin genişliğine sığdırmak için CSS'yi nasıl kullanabilirim?

<style type="text/css">
td.block
{
border: 1px solid black;
}
</style>
<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

EDIT: Ben zor kod genişliği olabilir, ama bu sütunda gidecek içerik dinamik olduğundan, bunu tercih etmem.

Aşağıdaki resme bakıldığında, ilk resim işaretlemenin ürettiği şeydir. İkinci görüntü istediğim şey.

resim açıklamasını buraya girin

html css html-table

— Mansfield
kaynak

Sorunu anlamıyorum. Son sütunu belirli genişlikle sınırlamak istiyor musunuz?

— MetalFrog

8

@diEcho Oldukça açık olduğunu düşündüm. Bir iki resim ekleyeceğim.

— Mansfield

CSS tablo sütunu otomatik genişliğinin

— Vadzim

450

Sorunuzu anladığımdan emin değilim, ama bir bıçakla alacağım. JSörnek .

HTML:

<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

CSS:

td{
    border:1px solid #000;
}

tr td:last-child{
    width:1%;
    white-space:nowrap;
}

— MetalFrog
kaynak

3

neden yazıyorsunuz <table style="width:100%">yerine<table width="100%" >

— diEcho

17

@diEcho Bu bölümü yazmadım, bu örnek koddaydı. Ne olursa olsun, elementler üzerinde width özelliğini kullanmak kötü bir uygulamadır. Bu hızlı örnekte, satır içi CSS gayet iyi, ancak üretim düzeyindeki kodsa bir dosyaya soyutlanmalıdır.

— MetalFrog

45

Bu IMO'yu yapmanın daha temiz bir yolu, "nostretch" (veya bunun gibi bir şey) adı verilen bir stil tanımlamak ve daha sonra CSS'deki nostretch'i genişliğe sahip olmaktır:% 1 ve nowrap. Sonra son tank avcısı 'class = "nostretch block"' a sahip olur. Bu şekilde istediğiniz herhangi bir hücreyi "geri çekebilirsiniz".

— Tim Holt

3

Bu iyi bir çözüm, ama ne yazık ki, Bootstrap 3 benim düğme grupları bundan sarın: jsfiddle.net/wexdX/326 Nasıl bastırmak olabilir herhangi bir fikir?

— Martin Braun

5

Bu yalnızca içerik daha sonra genişlik olduğunda çalışır:% 1 - değil mi? Çünkü içerik genişlikten küçükse:% 1, hücre daha büyük olacaktır.

— Adam

44

Ayar

max-width:100%;
white-space:nowrap;

sorununuzu çözecek.

— Shubham Nigam
kaynak

8

Benim için, bu tablo ve sütunları için en iyi otomatik sığdırma ve otomatikleştirme (css kullanın! Önemli ... sadece olmadan yapamıyorsanız)

.myclass table {
    table-layout: auto !important;
}

.myclass th, .myclass td, .myclass thead th, .myclass tbody td, .myclass tfoot td, .myclass tfoot th {
    width: auto !important;
}

Tablo veya tablo sütunları için css genişliğini belirtmeyin. Tablo içeriği daha büyükse ekran boyutunun üzerine çıkacaktır.

— myset
kaynak

3

Bulabildiğim tüm özelliklere göre bir elemanın CSS genişliğini% 1 veya% 100 olarak ayarlamak, üst öğe ile ilgilidir. Yazma sırasında Blink Rendering Engine (Chrome) ve Gecko (Firefox)% 1 veya% 100 (kullanılabilir alanı doldurmak için bir sütun küçültmek veya bir sütun yapmak) gibi görünse de, tüm CSS spesifikasyonlarına göre garanti edilmez Düzgün bir şekilde bulabilirim.

Bir seçenek, tabloyu CSS4 flex div'leriyle değiştirmektir:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

IE11 + gibi yeni tarayıcılarda çalışır, makalenin altındaki tabloya bakın.

— Mladen Adamovic
kaynak

1

Bunu yapmanın birçok yolu var!

yanılıyorsam beni düzeltin ama soru bu tür bir sonuç arıyor.

<table style="white-space:nowrap;width:100%;">
<tr>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:auto">this should be the content width</td>
</tr>
</table>

İlk 2 alan kalan sayfayı "paylaşır" (NOT:% 50 alanlarından birine daha fazla metin eklerseniz daha fazla yer kaplar) ve son alan tabloya sürekli olarak hakim olur.

Metin sarma izin mutlu iseniz beyaz boşluk taşıyabilirsiniz : nowrap; 3. alanın stiline,
o alanda yeni bir satır başlatmanın tek yolu olacaktır.

alternatif olarak, son alanda bir uzunluk ayarlayabilirsiniz. genişlik: 150 piksel ve ilk 2 alanda yüzde bırakın.

Bu yardımcı olur umarım!

— Christian Newman
kaynak

-1

Basit:

    <div style='overflow-x:scroll;overflow-y:scroll;width:100%;height:100%'>

— Parth Jani
kaynak