テーブルの左上のセルの枠線を削除し、背景色を変更する方法

テーブルの左上隅のセルを変更するのに問題があります。 私はこのテーブルを持っています:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<table>
        
zľavové hodiny <tr> <th>zač./deň</th><th>pondelok</th><th>utorok</th><th>streda</th><th>štvrtok</th><th>piatok</th> </tr> <tr> <th>10:00</th> <td></td> <td></td> <td colspan="3">práčky, sušičky (-20%)</td> </tr> <tr> <th>12:00</th> <td colspan="2">mikrovlnné rúry (-25%)</td> <td></td> <td>vysávače (-30%)</td> <td></td> </tr> </table> </div> </div>

テーブルの左上隅のセルの背景色を変更する必要があります。それは背景色#CCCCCCを持っているべきであり、右側に境界5pxを持ってはいけません(他の側面として1pxだけ)。他のものはすべて今のままであるべきです。何をすべきですか?

これは私のCSSコードです:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

table { 
border: 5px double #999;
background-color: white;
border-spacing: 5px 1em;
empty-cells: hide;
margin-left: auto; 
margin-right: auto;
}

table th, table td { 
border: 1px solid black;
padding: 0.5em;
border-collapse: collapse; 
 }
 
table tr:nth-child(1) { 
background-color: gold;
}

table th:nth-child(2) { 
border-bottom-width: 5px;
}

table th:nth-child(3) { 
border-bottom-width: 5px;
}


table th:nth-child(4) { 
border-bottom-width: 5px;
}

table th:nth-child(5) { 
border-bottom-width: 5px;
}

table th:nth-child(6) { 
border-bottom-width: 5px;
}

table tr:nth-child(odd) {
background-color: orangered;
}
 
table tr:nth-child(1) { 
background-color: gold;
}

tr th:nth-child(1) { 
background-color: plum;
border-right-width: 5px;
}
</div> </div>
1
nl ru de

4 答え

多分あなたのcssであなたは以下をすることができる:

table  tr:nth-child(1) th:nth-child(1){
background:#CCC;
border:1px 5px 1px 1px;
border-style: solid;
border-color: #the color;
}

それが役に立てば幸い。

0
追加された

あなたはその色に最初の行の最初の子を設定するか、ユニークなクラスかIDを設定して背景色を設定することができます

table tr:first-child th:first-child{background-color:#ccc!important}
0
追加された

左上のセルにアクセスするには、 tr:first-child th:first-child セレクタを使用できます。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

table { 
border: 5px double #999;
background-color: white;
border-spacing: 5px 1em;
empty-cells: hide;
margin-left: auto; 
margin-right: auto;
}

table th, table td { 
border: 1px solid black;
padding: 0.5em;
border-collapse: collapse; 
 }
 
table tr:nth-child(1) { 
background-color: gold;
}

table th:nth-child(2) { 
border-bottom-width: 5px;
}

table th:nth-child(3) { 
border-bottom-width: 5px;
}


table th:nth-child(4) { 
border-bottom-width: 5px;
}

table th:nth-child(5) { 
border-bottom-width: 5px;
}

table th:nth-child(6) { 
border-bottom-width: 5px;
}

table tr:nth-child(odd) {
background-color: orangered;
}
 
table tr:nth-child(1) { 
background-color: gold;
}

tr:first-child th:first-child { 
background-color: #CCCCCC;
/* add what you want */
}
<table>
        
zľavové hodiny <tr> <th>zač./deň</th><th>pondelok</th><th>utorok</th><th>streda</th><th>štvrtok</th><th>piatok</th> </tr> <tr> <th>10:00</th> <td></td> <td></td> <td colspan="3">práčky, sušičky (-20%)</td> </tr> <tr> <th>12:00</th> <td colspan="2">mikrovlnné rúry (-25%)</td> <td></td> <td>vysávače (-30%)</td> <td></td> </tr> </table> </div> </div>
0
追加された

thにクラス(空白)を追加し、CSSで(border:none; background-color:#fff!important;)を定義するだけです。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

table { 
border: 5px double #999;
background-color: white;
border-spacing: 5px 1em;
empty-cells: hide;
margin-left: auto; 
margin-right: auto;
}

table th, table td { 
border: 1px solid black;
padding: 0.5em;
border-collapse: collapse; 
 }
 
table tr:nth-child(1) { 
background-color: gold;
}

table th:nth-child(2) { 
border-bottom-width: 5px;
}

table th:nth-child(3) { 
border-bottom-width: 5px;
}


table th:nth-child(4) { 
border-bottom-width: 5px;
}

table th:nth-child(5) { 
border-bottom-width: 5px;
}

table th:nth-child(6) { 
border-bottom-width: 5px;
}

table tr:nth-child(odd) {
background-color: orangered;
}
 
table tr:nth-child(1) { 
background-color: gold;
}

tr th:nth-child(1) { 
background-color: plum;
border-right-width: 5px;
}

.blank
{
border:none;
background-color:#fff !important;
}
<table>
        
zľavové hodiny <tr> <th class="blank">zač./deň</th><th>pondelok</th><th>utorok</th><th>streda</th><th>štvrtok</th><th>piatok</th> </tr> <tr> <th>10:00</th> <td></td> <td></td> <td colspan="3">práčky, sušičky (-20%)</td> </tr> <tr> <th>12:00</th> <td colspan="2">mikrovlnné rúry (-25%)</td> <td></td> <td>vysávače (-30%)</td> <td></td> </tr> </table> </div> </div>
0
追加された