我的桌子造型有问题。现在我的表的一部分看起来像这样： table look now
我希望它最终看起来像这样： end table. This green color is for hover which I'm going to take care of later
1）我知道我应该使用＆＃34; border-collapse：collapse＆＃34;擦除行和列之间的那些行，但是当我这样做时，我行中的三角形（由边框组成）会松散它们的形状。
2）当我想让我的三角形呈现不同的灰色阴影（适合左侧的行）时，我使用的是偶数或奇数，它不起作用，所有的traing都是一种颜色。< / p>
我在这里添加我的代码：
.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>
答案 0 :(得分：0)
尝试使用此功能。我只试过镀铬，但看起来很不错。
/* 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;
}
答案 1 :(得分：0)
您的代码正常工作只是styling直接td元素而是使用even and odd上的tr，然后在那里设置child elements样式td #triangle { {1}}。
.top10 table tr:nth-child(odd) #triangle2{
................
................
................
}
.top10 table tr:nth-child(even) #triangle2{
................
................
................
}
border-collapse：collapse - 将表格边框折叠为单边框。
.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>