html - 第 n 个 child (偶数/奇数)不工作和边界崩溃问题

Question

我在设计表格样式时遇到了问题。现在我的表格部分如下所示: table look now

我希望它最后看起来像这样: end table. This green color is for hover which I'm going to take care of later

1) 我知道我应该使用“border-collapse: collapse”来删除行和列之间的那些线，但是当我这样做时，行末尾的三 Angular 形(由边框组成)失去了形状。

2) 当我想让我的三 Angular 形具有不同的灰色阴影(适用于它们左侧的行)并且我使用偶数或奇数时它不起作用并且所有三 Angular 形都是一种颜色。

我在这里添加我的代码:

.top10 table td:nth-child(2){
    width:50vw;
}
.top10 table td:nth-child(3){
    width:10vw;
}
.top10 table{
    font-size: 28px;
    font-weight: 400;
    color:black;
}
.top10 table tr:nth-child(odd){
    background-color: #636368;
}
.top10 table tr:nth-child(even){
    background-color: #c4cad5;
}

.top10 table #triangle2:nth-child(odd){
    background-color:#fff;
    width: 0; 
  height: 0; 
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 120px solid #636368;
}
.top10 table #triangle2:nth-child(even){
    background-color:#fff;
    width: 0; 
  height: 0; 
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 120px solid #c4cad5;
}

              <div class="top10 center">
                <div class="headerBox">
                    <h2>RANKING TOP 10</h2>
                </div>
                <table>
                    <tr><td>1.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td>
                    </tr>
                    <tr><td>2.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td>
                    </tr>
                    <tr><td>3.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td>
                    </tr>
                    <tr><td>4.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td>
                    </tr>
                    <tr><td>5.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td>
                    </tr>
                    <tr><td>6.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td>
                    </tr>
                    <tr><td>7.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td>
                    </tr>
                    <tr><td>8.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td>
                    </tr>
                    <tr><td>9.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td>
                    </tr>
                    <tr><td>10.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td>> <td>5 126 głosów</td> <td id="triangle2"></td>
                    </tr>
                </table>

Answer 1

你的代码是工作只是你样式直接td元素而不是使用偶数和奇数在tr 然后为 child elements 设置样式 td #triangle。

.top10  table  tr:nth-child(odd)  #triangle2{
................
................
................
}
.top10  table  tr:nth-child(even)  #triangle2{
................
................
................
}

border-collapse : collapse - Collapse table border into single-border.

.top10 table td:nth-child(2){
    width:50vw;
}
.top10 table td:nth-child(3){
    width:10vw;
}
.top10 table{
    font-size: 28px;
    font-weight: 400;
    color:black;
}
.top10 table tr:nth-child(odd){
    background-color: #636368;
}
.top10 table tr:nth-child(even){
    background-color: #c4cad5;
}

.top10  table  tr:nth-child(odd)  #triangle2{
  background-color:#fff;
  width: 0; 
  height: 0; 
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 120px solid blue;
}
.top10  table  tr:nth-child(even)  #triangle2{
    background-color:#fff;
    width: 0; 
  height: 0; 
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 120px solid red;
}

<div class="top10 center">
 <div class="headerBox">
 <h2>RANKING TOP 10</h2>
 </div>
<table>
<tr><td>1.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td>
</tr>
<tr><td>2.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td>
</tr>
<tr><td>3.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td>             </tr>
                    <tr><td>4.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td>
                    </tr>
                    <tr><td>5.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td>
                    </tr>
                    <tr><td>6.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td>
                    </tr>
                    <tr><td>7.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td>
                    </tr>
                    <tr><td>8.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td>
                    </tr>
                    <tr><td>9.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td>
                    </tr>
                    <tr><td>10.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td>> <td>5 126 głosów</td> <td id="triangle2"></td>
                    </tr>
                </table>