nth-child(偶数/奇数)不起作用和边境爆发问题

Question

我在造型我的桌子方面有问题。现在我的桌子看起来像这样：现在看桌子

我希望它最终以这种方式看：茶几。这种绿色是用于悬停的，我将稍后照顾

1(我知道我应该使用"边界崩溃：崩溃"来擦除行之间的这些界线，但是当我这样做时，我的三角形在行的末端(由边界制成(松动其形状。

2(当我想将三角形以不同的灰色阴影(适用于左侧的行(时，我正在使用甚至奇怪的灰色，它不起作用，所有的trawing都均以一种颜色。

我在这里添加我的代码：

.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

您的代码正常工作，只是您是styling直接td元素，而是在tr上使用even and odd，然后在此处样式的child elements在此处使用td #triangle。

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

边界崩溃：倒塌 - 倒塌的表边框陷入单堡。

.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>

Answer 2

尝试使用此功能。我只尝试了铬，但似乎很好。

/* 1) */
.top10 table tr {
  display: inline-flex;
}
/* 2) */
.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 #636368;
}
.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 #c4cad5;
}