css表专栏问题？

Question

嘿伙计们，

我正在使用bootstrap 3，我创建了一个响应类型的表。该表分为4列，每列用空格分隔。但根据我的要求，我不需要第一列之后的空格如图中红色箭头所示。

对于我使用过属性border-collapse的表类：单独和边距：10px 0; 这里的边框间距负责列分隔。请帮忙如何删除边框间距所做的表格的单个空白区域...请在下面的评论中找到js小提琴链接

Answer 1

你可以用边框填充那个空白区域（给出相对位置和其他一些额外的CSS）： 例如：

.buynow-product-comparisions table, .table-product-comparision table {

}
.buynow-product-comparisions th, .table-product-comparision th, .buynow-product-comparisions td, .table-product-comparision td {
    background-color: #c9e8fa;
    text-align: center;
    color: #666;
}
.table-product-comparision th.personal-head, .table-product-comparision th.cloudworkgroup-head, .table-product-comparision th.enterprise-head {
    background: #ffffff;
    color: #ffffff;
}
.buynow-product-comparisions td.bg-white {
    background: #ffffff;
    padding: 5px 0px;
}
.buynow-product-comparisions td.plan-feature-text, .table-product-comparision td.plan-feature-text {
    background-color:#c9e8fa;
    color: #666;
    text-align: left;
}
.table-product-comparision th.attribute-title {
    background-color: #FFF;
    text-align: right;
    width: 30%;
}
.cloud-personal {
    background: none repeat scroll 0 0 #4d4d4d;
    padding: 12px 0;
}
.table-product-comparision td.vtypes {
    color: #26a2ed;
    font-weight: bold;
}
.table-product-comparision td {
    background: none repeat scroll 0 0 #dedede;
    color: #666;
    text-align: center;
}
.table-product-comparision td.plan-feature-text {
    background: #ffffff;
}
.table-responsive.buynow-page, .table-responsive.buynow-page {
    padding: 0;
}
td + td {
    border-right:10px solid white;
    border-bottom:1px solid #ccc
}

http://jsfiddle.net/84LXL/4/（删除了一些css，并且大部分都在最后一行添加）