我需要能够向表格中的特定表格单元格添加箭头。每个表格单元格都有一个边框颜色，我希望箭头匹配。任何人都知道这是否可能。
这是我的基本表
我想把它变成以下。注意单元格右侧的箭头状边框。垂直边框已被删除。
此外，如果右侧的列是不同的颜色，我也需要反映这一点。如此示例图像所示
有谁知道这是否可以单独在 CSS 中完成？目前我建立了一个普通的表格并设置了每个单元格的背景颜色和边框样式。
我真的不想为箭头添加额外的列，但如果必须这样做，那么我会这样做，但不确定如何为箭头的边框着色。我需要能够处理无限的颜色，因为用户可以在运行时选择这些颜色。
注意：我不知道表格单元格的大小，因此需要一些动态的或使用百分比的东西。
编辑： 如果它更容易，我很高兴箭头向左移动，就像下面新图像中的第一列......
这可能会给你一个开始：http: //jsfiddle.net/pxSs6/1/
我用:before伪元素创建了箭头，并且“颜色检测”是通过相邻的兄弟选择器完成的，如下所示：
.gray + td:before {
border-left-color: gray;
}
我使用em了尺寸，但我想您必须调整尺寸以满足您的需求。
这对你有用吗？我不确定它的适应性如何，但它可能会给你一个良好的开端；）
抱歉，我的编码可能很糟糕：/
CSS：
TABLE {
margin:0;
padding:0;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
text-align:left;
width:600px;
border:0 none;
border-collapse:collapse;
}
TH, TD {padding:4px; border-bottom:1px solid #fff; background-size:100%;}
tr:nth-child(odd) { background:#ddeff3; }
tr:nth-child(even) { background:#92cddc;}
TH {border: 1px solid #fff; background-color: #548dd4;}
.arrow {position: relative;}
.arrow:after {
content: '';
position: absolute;
top: 0px;
right: -10px;
width: 0;
height: 0;
border: 11px solid transparent;
border-left: 12px solid #ddeff3;
z-index:2;
}
.arrow:before {
content: '';
position: absolute;
top: 0px;
right: -11px;
width: 0;
height: 0;
border: 11px solid transparent;
border-left: 12px solid #fff;
z-index:1;
}
tr:nth-child(odd) .arrow:after {border-left: 12px solid #ddeff3;}
tr:nth-child(odd) .arrow:before {border-left: 12px solid #fff;}
tr:nth-child(even) .arrow:after {border-left: 12px solid #92cddc;}
tr:nth-child(even) .arrow:before {border-left: 12px solid #fff;}
HTML：
<table>
<tr>
<th scope="col">Template</th>
<th scope="col">Measure</th>
<th scope="col">Number</th>
</tr>
<tr>
<td class="arrow">Subcontractor/Contract Feedback</td>
<td class="arrow">Health and Safety</td>
<td>1</td>
</tr>
<tr>
<td class="arrow">Subcontractor/Contract Feedback</td>
<td class="arrow">Quality system</td>
<td>1</td>
</tr>
<tr>
<td class="arrow">Subcontractor/Contract Feedback</td>
<td class="arrow">Staff Performance</td>
<td>1</td>
</tr>
</table>
FIDDLE 在这里：http: //jsfiddle.net/takuhii/6hbCv/1/