Soru CSS ve İç içe geçmiş tablolar


Diğer tabloları içeren html tablom var. Benim problemim, iç masaların dış masa ile aynı kuralları miras almasıdır.

Dış tablonun kurallarını aşmanın bir yolu var mı? Temelde iç masaya söylemek istiyorum:

Hey iç masa Senin adın "X". Dış tablonun ve kurallarının hepsini unutmanı istiyorum. Bu diğer özel kuralları izlemeni istiyorum.

HTML / CSS'de bunu gerçekleştirmenin bir yolu var mı? Örnekler?


18
2017-10-29 16:39


Menşei


En iyi bahsiniz, CSS ile sayfa düzenleri oluşturmayı öğrenmek ve <div>iç içe geçmiş tablolar yerine. Düzenlerin şu anda yapılmasının uygun yolu. - Sparky
İç içe geçmiş tablolarla dolu eski kodu korumayı sevmiyorum> <; - Nick Rolando
table {/*rules*/} ve table table {/*other overriding rules*/} işte böyle yapılır? - Joseph Marikle
Hangi kurallardan bahsediyorsun? Bazı kodları gösterebilir misin? - Nick Rolando
@Sparky bile bugün (2.5 yıl sonra), bazı veriler hala sekmeli. Ve şimdi ve sonra biri ikiden fazla boyuta sahip verilerle uğraşmak zorunda. Ayrıca, OP'nin problemi ne daha iyi ne de daha kötü hale gelir. div.outer > div.row > div.cell > div.inner > div.row > div.cell yerine table.outer > tr > td > table.inner > tr > td. - peterp


Cevaplar:


table.something > thead > tr > td,
table.something > tbody > tr > td,
table.something > tfoot > tr > td,
table.something > tr > td {
   ...
}

Bu, seçilen tablonun yalnızca iç içe geçmiş tabloların doğrudan çocuklarının stilleri alacağından emin olacaktır.


20
2017-10-30 03:39



Gerçekten harika! ">" seçicisini daha önce bilmiyordum! teşekkür ederim! - Dominik Kirschenhofer
Bunun için çok teşekkürler. - ladle3000


Aşağıdakilere sahip olduğunuzu varsayacağım

HTML

<table class="outer-table">
    <tr>
        <td>
            <table class="inner-table">
                <tr>
                    <td>
                        I'm some content!
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS - Sınıf / ID olmadan

table { border: 1px solid black; }
table tr td table { border: 1px solid green; }

Bazen şunlarla uzaklaşabilirsiniz:

table { border: 1px solid black; }
table table { border: 1px solid green; }

CSS - Sınıf / ID ile

Sınıflar ve Kimlikler ile küçük bir not. Sınıflar, arzu ettiğiniz stilleri istediğiniz kadar taşıyabileceğiniz ve taşıyabileceğiniz bir şeydir. Kimlikler sadece bir eleman için kullanılmalıdır, çünkü bu elemanın bir tanımlamasıdır. Bu, iki iç içe geçmiş tablonuz varsa, ikinci tabloya yeni bir benzersiz kimlik vermeniz gerektiği anlamına gelir.

Kimlikler CSS'de # olarak gösterilir. Yani sadece belirli bir kimlik için kullanmak istiyorsanız, bu olacaktır:

#outer-table { /* Outer table Style */ }
#inner-table { /* Inner table Style */ }

CSS'de sınıfı (örnek olarak gösterildiği gibi) kullanmak bir süredir. Öğeyi belirtmeden periyodu kullanırsanız, aynı isimde bir sınıfı olan tüm öğeler için kullanılacaktır, bu nedenle, eklenmek istediğiniz öğeyi belirtmek en iyisidir.

table.outer-table { /* Outer table Style */ }
table.inner-table { /* Inner table Style */ }

5
2017-10-29 17:05



Bunun yerine, sınıfları ve / veya kimlikleri atamak ne demektir? - Sparky
Öğelere sınıflar ve / veya kimlikler atamanın yanlış bir tarafı yoktur, tavsiye edilir! Bununla birlikte, işaretlemeyi hiçbir şekilde değiştiremediğimiz birkaç proje üzerinde çalıştım. Sadece harici stil sayfasını değiştirin. Sadece bir şeyler varsayıyordum (3 am>. <) - Dave
Deseni görmeye başlıyorum. Her ne kadar sınıf isimlerini minimumda kullanmayı planlasa da. Nedir table table { format stuff; } Sınıf isimleri uygulandığında nasıl olur? - codingJoe
Bu basitçe <table class = "myclass"> ... </ table> olur. Sonra CSS'niz table.mycalss {/ * style * /} olur. Bunu cevaba ekleyeceğim, böylece nasıl olduğunu görebilirsiniz. - Dave
@ cumbo'nun tavsiyesi akıllıcadır. Bu örnekleri dün gece yaptım; Onlar aynı masadan, bir kez diğerlerinden daha fazla derinlik kazandığında, tam olarak orada neler olduğunu görebiliyorsunuz. jsfiddle.net/jalbertbowdenii/bMZfv  jsfiddle.net/jalbertbowdenii/bMZfv/13 iç içe geçmiş tablolar değiller, bu yüzden bu bir yorum ve bir cevap değil; ne olursa olsun, onları tam olarak bu şekilde kolayca hedefleyebilirsiniz. - albert


En kolay yol sınıf ve id. Öğeyi kullandığınızdan emin olun.

table.outter { some: style; } /* class */  
table#inner { some: style; } /* id */  

Ayrıca kullanabilirsiniz

table { some: style; }  
table table { some: style; } /* override outter table */  

ya da ikiyi birleştir

table.outter { some: style; } /* class */  
table.outter table#inner { some: style; } /* id */  

Bu yardımcı olur umarım.


0
2017-10-06 03:54