Html 网格中最右边的列不等于其他列

我很难让三列中最右边的一列与其他列的宽度相等。代码如下：

除了最后一根，每根柱子都有60像素的填充物（一个排水沟），因为我不想在外面的柱子上有排水沟。这就是问题所在，但我不知道如何解决。我的意思是：

[class*='col-'] {
    padding-right: 60px;
}

[class*='col-']:last-of-type {
    padding-right: 0;
}

---

非常感谢您的帮助。谢谢

像这样的东西怎么样

CSS:

---

工作示例：

不确定是否适合使用Table、tr和td，但它似乎解决了对称性问题。 td与第n个子伪类相结合

td:nth-child(1){
    border-right:40px solid transparent;
}
td:nth-child(2){
    border-right:20px solid transparent;
    border-left:20px solid transparent;
}
td:nth-child(3){
    border-left:40px solid transparent;
}

---

您是说最右边的列不应该有60px的填充，但仍然与前两列的宽度相同？为什么要从最后一列中删除填充物？因为填充物是一个檐槽，如果将其放在那里，将使网格不相等。右手边的空白比左手边多，除非网格不再水平倾斜，页面右手边的空白比左手边多60像素。另外，

p

只是用来简化问题，每列将包含所有类型的元素。谢谢你的帮助！你能改变你的html标记吗？或者这只是css？当然，我想我可以。我只是希望用CSS来做，如果可能的话，请勾选我更新的答案。。。这更像你需要的吗？那太好了，真是一种享受。非常感谢！传奇

td:nth-child(1){
    border-right:40px solid transparent;
}
td:nth-child(2){
    border-right:20px solid transparent;
    border-left:20px solid transparent;
}
td:nth-child(3){
    border-left:40px solid transparent;
}