CSS：表格格式 - 边框、特定列中的间距和条件格式

Question

我正在尝试通过 css 格式化一个特定的表格，如下图所示：

由于我是 css 新手，我在指定时遇到了问题：

1. 边框：如您所见，我希望为垂直和水平边框设置不同的边框颜色和粗细；用于行名和列名
2. 第 13 列之后的间隙：一种解决方案可能是创建第二个表并将它们彼此相邻放置，但我不想采用该解决方案
3. 条件格式：我可以使用 css 执行此操作吗，否则我必须使用 jQuery solution

Answer 1

其实很简单。

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    text-align: center;
}

table td {
    border: 1px solid #000;
}

table th {
    border: 2px solid #000;
}

table tr th:nth-child(4),
table tr td:nth-child(4) {
    border: none;
    width: 20px;
}

条件格式应该由 JS 处理，或者如果数据是从数据库中填充的，则在服务器端进行并在列上使用类名。

见 jsfiddle：http://jsfiddle.net/b579hy76/

Answer 2

请注意，对于 nth-child(x)，您必须在 13hn 列之后添加一个额外的空列才能实现此效果。