Soru inci genişliği çalışmıyor?


Biraz arka plan, bu demodan sabit rapor üstbilgileri almak için bunun en az miktarda parçasını uygulamaya çalışıyorum: http://www.imaputz.com/cssStuff/bigFourVersion.html

Başlıklar satırlarımın hiçbiri (aşağıya doğru üstbilgi satırları) aşağıdaki hücrelerle dikey olarak hizalanmadan çalışıyorum. Tüm hücrelerin genişliğini bu css ile aynı şekilde ayarladım:

td {
    width: 100px;  
}

th {
    width: 100px;
}

Ve th genişliğini değiştirmenin bir etkisi var, ama bazı nedenlerden dolayı 100 piksel genişliğinde değil. Başlık satırından başlık satırına, genişlikler bazı sebeplerden farklıdır. Tüm hücreleri aynı genişliğe nasıl zorlayabilirim?

Aşağıda, yerinde bulunan CSS'nin geri kalanı var. Firefox ile test ediyorum ve donmuş başlıkların küçük CSS ile çalışmasını sağlamaya çalışıyorum. Bağlantılı örnekte bulunan CSS'nin bir kısmı bu düzende çok belirgindir ve çeşitli sayılarda sütun / satır için herhangi bir düzenleme ile çalışacak bir şey üzerinde çalışıyorum. Şu anda, hücrelerin hepsi uyumlu olmadığı istisna ile çalışıyor.

#reportPlace table thead tr {
    display: block;
}

#reportPlace table tbody {
    display: block;
    height: 262px;
    overflow: auto;
}

NOT: İkisini de kaldırırsam display: block stilleri, sütun genişlikleri ile sorunu giderir, ancak daha sonra başlık satırları artık donmuş değildir.

Kısmen ateşledi. Her bir eleman ve gövde yerine tüm tabloya blok gösterimi ayarlıyorum ve şimdi tüm sütunlar sıraya diziliyor. Birden çok satır başlığındaki her bir satırın ayrı ayrı blok kümesi olduğundan, bunlar bağımsız olarak bağımsızlığı otomatikleştiriyordu. Bununla birlikte, genişlik ayarı hala göz ardı ediliyor ve raporu biçimlendirmek için buna ihtiyacım var.

#reportPlace table /*thead tr*/ {
    display: block;
}

#reportPlace table tbody {
/*    display: block;*/
    height: 262px;
    overflow: auto;
}

Örnek HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Untitled Page</title>
  <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="reportPlace">
    <table border="0">
      <thead>
        <tr class="fixedHeader">
          <th class="titleAllLockedCell">
            <span>&nbsp;</span>
          </th>
          <th class="titleTopLockedCell">
            <span>Fruits</span>
          </th>
          <th class="titleTopLockedCell">
            <span>Vegitables</span>
          </th>
        </tr>
        <tr class="fixedHeader">
          <th class="titleAllLockedCell">
            <span>&nbsp;</span>
          </th>
          <th class="titleTopLockedCell">
            <span>Original</span>
          </th>
          <th class="titleTopLockedCell">
            <span>Original</span>
          </th>
        </tr>
        <tr class="fixedHeader">
          <th class="titleAllLockedCell">
            <span>&nbsp;</span>
          </th>
          <th class="titleTopLockedCell">
            <span>2009</span>
          </th>
          <th class="titleTopLockedCell">
            <span>2009</span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="titleLeftLockedCell">
            <span>1-02</span>
          </td>
          <td class="valueCell">
            <span>65412&nbsp;</span>
          </td>
          <td class="valueCell">
            <span>16542&nbsp;</span>
          </td>
        </tr>
        <tr>
          <td class="titleLeftLockedCell">
            <span>1-03</span>
          </td>
          <td class="valueCell">
            <span>456052&nbsp;</span>
          </td>
          <td class="valueCell">
            <span>1654652&nbsp;</span>
          </td>
        </tr>
        <tr>
          <td class="titleLeftLockedCell">
            <span>1-04</span>
          </td>
          <td class="valueCell">
            <span>564654&nbsp;</span>
          </td>
          <td class="valueCell">
            <span>654654&nbsp;</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

25
2018-05-11 22:09


Menşei


Css'inizde bir yazım hatası var, ancak kuralın göz ardı edileceğinden bu soruna neden olduğundan şüpheliyim. td{ width: 100; } olmalı td{ width: 100px; } - Kevin Peno
@Kevin Son yarı virgül genellikle optimizasyon için JS optimize ediciler tarafından ihmal edildiğinden bu hiç de hata yapmıyorum. - Gio Borje
@Gio, burada css konuşuyoruz. Çok az özellik, birimsiz olabilir ve hiçbirinin olmaması gerektiği önerilmektedir. Böylece px tanımda gereklidir. - Kevin Peno
Ah evet haklısınız, o sırada oynayıp sabitledim, ama yine de çalışmıyor. - AaronLS
Sorununuzu görselleştirmek için html gönderme hakkında ne dersiniz? - pstanton


Cevaplar:


Kullanmak zorundaydım min-width:100px stil yerine width tarzı.

O zamandan beri buldum diğer konular arasında CSS gerektiren table { table-layout: fixed; width:100%; } tabloların genişliğe uygun olması için sütunlar için bir genişlik ayarlanması gerektiği gibi.

Herhangi birini içeren ilk satırın olması colspan ayrıca bir sorun da olabilir, bu yüzden hiçbir sınır içermeyen ilk satır olarak ek bir satır ekliyorum (esas olarak görünmez) ve tek tek hücreler (kodlama yok) var, böylece genişlikler ilk "sahte" satır tarafından oluşturulabilir ve Daha sonra ikinci sıradaki colspan'ın bir soruna neden olmaz. Dolgu / kenar boşluğunu, ilk satırın diğer satırlarla aynı olmasını, böylece genişliklerin uygun şekilde oluşturulmasını istememeniz gerektiğini unutmayın:

<tr class='scaffolding'>...</tr>

tr.scaffolding, .scaffolding td {
    border:none;
    padding-top:0;
    padding-bottom:0;
    height:0;
    margin-top:0;
    margin-bottom:0;
    visibility:hidden;
}

53



Bu wiki'ye eklerseniz, diğer potansiyel sorunları / sorun giderme adımlarını kendi başlıkları ile ayırın. - AaronLS
Eğer birisi bootstrap kullanıyorsa ve bu soruya geldiyse, muhtemelen sadece eklemeniz gerekir. table-responsive masanın sınıflarına. - zed
vurgulamak table { table-layout: fixed; } önemli - yu yang Jian