将箭头添加到表格单元格

Question

我需要能够在表格中的特定表格单元格中添加箭头。每个表格单元格都有边框颜色，我希望箭头匹配。任何人都知道这是否可行。

这是我的基本表

我想把它变成以下内容。注意单元格右侧边框的箭头。垂直边框已被删除。

如果右边的列是不同的颜色，我也需要反映这一点。如此示例图像显示

有人知道这是否可以单独使用CSS吗？目前我构建了一个普通表并设置了每个单元格的背景颜色和边框样式。

我真的不想为箭头添加额外的列，但如果必须这样做，那么我会这样做，但不知道如何为箭头的边框着色。我需要能够处理无限的颜色，因为用户可以在运行时选择它们。

注意：我不知道表格单元格的大小，因此需要一些动态的东西，或者使用百分比。

修改 如果它变得更容易我很高兴箭头向左移动，就像下面新图像中的第一列......

Answer 1

这可能会给你一个开始：http://jsfiddle.net/pxSs6/1/

我用:before伪元素创建了箭头，'颜色检测'是通过相邻的兄弟选择器完成的，如下所示：

.gray + td:before {
  border-left-color: gray;
}

我使用em作为尺寸，但我猜您必须根据您的需要调整尺寸。

Answer 2

看看这个页面：

http://css-tricks.com/snippets/css/css-triangle/

可能正是你想要的一个好的解释

Answer 3

这对你有用吗？我不确定它是多么适应性，但它​​可能会给你一个良好的开端;）

道歉，我的编码可能很糟糕：/

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/