CSS görüntüleme: genişlik% 100 olarak ayarlandığında tablo satırı genişlemiyor

100

Biraz sorun yaşıyorum. FireFox 3.6 kullanıyorum ve aşağıdaki DOM yapısına sahibim:

<div class="view-row">
    <div class="view-type">Type</div>
    <div class="view-name">Name</div>                
</div>

Ve aşağıdaki CSS:

.view-row {
width:100%;
display:table-row;
}

.view-name {
display: table-cell;
float:right;
}

.view-type {
display: table-cell;
}

Eğer çıkarırsam display:table-row, view-row% 100 genişlik göstererek doğru görünecektir . Geri koyarsam küçülür. Bunu JS Bin'e koydum:

http://jsbin.com/ifiyo

Neler oluyor?

css

— şans arkadaşı
kaynak

91

display:table-rowVb. Kullanıyorsanız , içeren bir tablo içeren uygun işaretlemeye ihtiyacınız vardır. Onsuz, orijinal sorunuz temelde aşağıdakilerin eşdeğer kötü işaretlemesini sağlar:

<tr style="width:100%">
    <td>Type</td>
    <td style="float:right">Name</td>
</tr>

Yukarıdaki tablo nerede? Sen birden ortaya bir satır olamaz (tr birinde yer almalıdır table, thead, tbodyvs.)

Bunun yerine, bir dış eleman ekleyin display:table,% 100 genişliği içeren elemanın üzerine koyun. İçteki iki hücre otomatik olarak 50/50 olacak ve metni ikinci hücreye doğru hizalayacaktır. floatsTablo öğelerini unutun . Çok fazla baş ağrısına neden olur.

biçimlendirme:

<div class="view-table">
    <div class="view-row">
        <div class="view-type">Type</div>
        <div class="view-name">Name</div>                
    </div>
</div>

CSS:

.view-table
{
    display:table;
    width:100%;
}
.view-row,
{
    display:table-row;
}
.view-row > div
{
    display: table-cell;
}
.view-name 
{
    text-align:right;
}

— KP.
kaynak

11

Lanet arabalardan kurtulmada +5!

— chum of şans

37

-1 çünkü açıklama sadece yanlış. Göre CSS2.1 özellikleri , söz konusu işaretleme / CSS çalışması gerekiyordu.

— user123444555621

8

Hiçbir tarayıcı eksik tablonun herhangi bir sorun (Firefox 3.0 sahiptir vardı ...) gerçek sorun olduğunu tablo satırları üzerinde genişliği ayarları tamamen göz ardı edilir . (bu, söz konusu işaretleme / CSS'nin aslında beklendiği gibi çalışmadığı anlamına gelir, bu nedenle yukarıdaki yorumum yanlıştı;))

— user123444555621

3

Bu cevap yanlış. Soran kişinin işaretlemesi doğru. Pumbaa80'in dediği gibi, sorun, genişliğin masa seviyesi yerine satır seviyesinde olması gerektiğini varsaymaktır. Genişlik yalnızca tablo düzeyinde yorumlanır. Satırlar tamamen ihmal edilebilir. Aşağıda tam cevabıma bakın.

— Amin Ariana

1

İşe yarayan cevaba yorum yapmıyordum. Yorumunuza, CSS'de bir tablo satırı eklemeniz gerektiğine dair yorum yapıyordum. Yapmıyorsun. Kişisel inançlarınız nedeniyle bir şeyin sözde geçerli olduğunu söylemek, söylenecek çok dogmatik / katı bir şeydir; Özellikle CSS tamamen geçerliyken.

— Bill Rosmus

57

Test edilen cevap:

.View-row css'de değiştirin:

display:table-row;

to:

display:table

ve "şamandıradan" kurtulun . Her şey beklendiği gibi çalışacak.

Yorumlarda da önerildiği gibi sarma masasına gerek yoktur. CSS, örtük olan ağaç yapısı düzeylerinin (bu durumda satırlar) çıkarılmasına izin verir. Kodunuzun çalışmamasının nedeni, "genişliğin" tablo satırı düzeyinde değil, yalnızca tablo düzeyinde yorumlanabilmesidir. Bir "masanız" ve hemen altında "masa-hücresi" varsa, bunlar örtük olarak üst üste oturuyor olarak yorumlanır.

Çalışma örneği:

<div class="view">
    <div>Type</div>
    <div>Name</div>                
</div>

css ile:

.view {
  width:100%;
  display:table;
}

.view > div {
  width:50%;
  display: table-cell;
}

— Amin Ariana
kaynak

Cevabınız <table><td></td></table>, kendi başına W3C'ye göre geçersiz HTML biçimlendirmesi olan CSS eşdeğeri olduğunu gösteriyor . Doğrulayacak olsa da, neden tarayıcıya bu işaretlemeyi taklit etmesini söylemeyi öneriyorsunuz?

— KP.

16

Bu, CSS kurallarına göre doğrudur: w3.org/TR/CSS2/tables.html#anonymous-boxes . Gereksiz kod satırlarını kaldırarak bakımı daha kolaydır (örneğin, KP tarafından önerilen gereksiz <view-row> div.). Bu bana yardımcı oldu ... Kullanıyorum. +1

— Bill Rosmus

1

Float ifadelerinden kurtulmak yeterli olmaz mıydı? .View div, display: table-row özelliğini koruyabilir.

— Ideogram

1

Güzel, ~~ ama anlayabildiğim kadarıyla IE9'da çalışmıyor. ~~ Yanılıyorum. Bu harika! :)

— f1lt3r

Tabii ki ekran: 1'den fazla satırınız olduğunda tablonun hiçbir faydası yoktur. Hepsi kötü bir şekilde hizalanmamış sonuçlandı

— edc65

16

CSS3 spesifikasyonuna göre, mizanpajınızı tablo stili bir öğeye sarmanız gerekmediğini unutmayın. Tarayıcı, mevcut değilse, içeren öğelerin varlığını çıkaracaktır.

— John Carney
kaynak

4

Aynı edilmiş CSS 2.1 belirtilmiş bölüm 17.2.1, üst 3.2. Aşağıdaki HBOX / VBOX örneği tam olarak söz konusu durumdur. Görünüşe göre tarayıcılar umursamıyor.

— user123444555621

1

üzerinde vermek .view-typesınıfın float:left;veya silmek float:right;arasında.view-name

edit:<div class="view-row"> Örneğin div'inizi başka bir div ile sarmalama<div class="table">

ve aşağıdaki css'yi ayarlayın:

.table {
    display:table;
    width:100%;}

Doğru sonuçlar için tablo yapısını kullanmanız gerekir.

— Sotiris
kaynak

Ff3.6, ie 8, chrome, opera ile test ettim. burada görebilirsiniz jsbin.com/ifiyo/4 onları yan yana gösteriyorlar

— Sotiris

En sağda bir isim arıyordum, en sola yazın ... bir ekran yaparsanız: her ikisinde de satır içi ve ekranı çıkarın: masa satırı işe yarıyor, bunun daha iyi bir yolu olabileceğini düşünüyordum. bunu tablo satırı / hücre özelliklerini kullanarak yapın.

— chum of şans

0

Tablo hücresini doğrudan tablonun içine yerleştirebilirsiniz. Masan olmamalı. Tablo satırıyla başlamak işe yaramaz. Bu HTML ile deneyin:

<html>
  <head>
    <style type="text/css">
.table {
  display: table;
  width: 100%;
}
.tr {
  display: table-row;
  width: 100%;
}
.td {
  display: table-cell;
}
    </style>
  </head>
  <body>

    <div class="table">
      <div class="tr">
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
      </div>
    </div>

      <div class="tr">
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
      </div>

    <div class="table">
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
    </div>

  </body>
</html>

— Rakensi
kaynak