テーブルの境界線/別の編集

Question

私の学校のHTML/CSSプロジェクトで作業していますが、問題が発生しました。私のページの1つに、私はCSSで別々に編集したい3つのテーブルがあります。 私はすべてのテーブルにクラスを入れようとしましたが、それでも2番目のテーブルのコマンドだけを受け取ります。私はTRとTDのすべてにクラスを入れるはずですか？

body { 
 
    background-color: lightgrey; 
 
} 
 
.tabel1 { 
 
    border-color: purple; 
 
    width: 400px; 
 
    text-align: center; 
 
    height: 100px; 
 
} 
 
.tabel2, 
 
tr, 
 
td { 
 
    width: 350px; 
 
    border-color: grey; 
 
    border-style: solid; 
 
    border-collapse: collapse; 
 
} 
 
.tabel3 { 
 
    border-radius: 25px; 
 
    background: purple; 
 
    padding-left: 2%; 
 
    padding-right: 2%; 
 
    padding-bottom: 4%; 
 
    padding-top: 4%; 
 
    width: 400px; 
 
    border-color: purple; 
 
    box-shadow: 15px 6px 10px purple; 
 
} 
 
.tr1 { 
 
    background-color: purple; 
 
} 
 
.tr2 { 
 
    background-color: #9370DB; 
 
} 
 
.tr3 { 
 
    background-color: purple; 
 
} 
 
.tr4 { 
 
    background-color: #9370DB; 
 
} 
 
.tr5 { 
 
    background-color: purple; 
 
} 
 
.tr6 { 
 
    background-color: #9370DB; 
 
} 
 
.tr7 { 
 
    background-color: purple; 
 
}

<table class="tabel1" align="center"> 
 
    <tr> 
 
    <td><strong>Film-Favo's</strong> 
 
    </td> 
 

 
    </tr> 
 
</table> 
 
<br> 
 

 
<table class="tabel2" align="center"> 
 
    <tr class="tr1"> 
 
    <td>Film</td> 
 
    <td>Regisseur</td> 
 
    </tr> 
 

 
    <tr class="tr2"> 
 
    <td>Film 1</td> 
 
    <td>Regisseur 1</td> 
 
    </tr> 
 

 
    <tr class="tr3"> 
 
    <td>De noorderlingen</td> 
 
    <td>Ales van warmerdam</td> 
 
    </tr> 
 

 
    <tr class="tr4"> 
 
    <td>Film 3</td> 
 
    <td>Regisseur 3</td> 
 
    </tr> 
 

 
    <tr class="tr5"> 
 
    <td>Film 4</td> 
 
    <td>Regisseur 4</td> 
 
    </tr> 
 

 
    <tr class="tr6"> 
 
    <td>Film 5</td> 
 
    <td>Regisseur 5</td> 
 
    </tr> 
 

 
    <tr class="tr7"> 
 
    <td>Film 6</td> 
 
    <td>Regisseur 6</td> 
 
    </tr> 
 
</table> 
 
<br> 
 

 
<table align="center" class="tabel3"> 
 
    <tr> 
 
    <td bgcolor="#EE82EE">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium 
 
     quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate.</td> 
 
    </tr>

Answer 1

tr、tdの指定を削除すると、テーブルのスタイルが異なります。 CSSは、行またはセルではなく、tableに適用する必要があります。

ここにはFiddle Demoがあります。

CSS

body { 
    background-color: lightgrey; 
} 

.tabel1 { 
    border-color: purple; 
    width: 400px; 
    text-align: center; 
    height: 100px; 
} 

.tabel2 { 
    width: 350px; 
    border-color: grey; 
    border-style: solid; 
    border-collapse: collapse; 
} 

.tabel3 { 
    border-radius: 25px; 
    background: purple; 
    padding-left: 2%; 
    padding-right: 2%; 
    padding-bottom: 4%; 
    padding-top: 4%; 
    width: 400px; 
    border-color: purple; 
    box-shadow: 15px 6px 10px purple; 
} 

HTML

<table class="tabel1"> 
    <thead> 
    <tr> 
     <th>Col 1</th> 
     <th>Col 2</th> 
     <th>Col 3</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Cell 1</td> 
     <td>Cell 2</td> 
     <td>Cell 3</td> 
    </tr> 
    </tbody> 
</table> 
<table class="tabel2"> 
    <thead> 
    <tr> 
     <th>Col 1</th> 
     <th>Col 2</th> 
     <th>Col 3</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Cell 1</td> 
     <td>Cell 2</td> 
     <td>Cell 3</td> 
    </tr> 
    </tbody> 
</table> 
<table class="tabel3"> 
    <thead> 
    <tr> 
     <th>Col 1</th> 
     <th>Col 2</th> 
     <th>Col 3</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Cell 1</td> 
     <td>Cell 2</td> 
     <td>Cell 3</td> 
    </tr> 
    </tbody> 
</table> 

結果

Answer 2

最も明白な可能性の高い問題は、あなたがtable2に同じスタイルを適用したことをすべてtr要素、およびこのルールですべてtdの要素である：

.tabel2, 
tr, 
td {} 

子孫セレクタのいくつかの研究を行い、多分これを試してください：

.table2, 
.tabel2 tr, 
.table2 td {} 

どういうわけか私はそれがあなたが本当に望んでいるものだとは思っていません。

Answer 3

table, th, td { 
    border: 1px solid black; 
}