css 表格列问题？

Question

大家好，

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

对于表格类，我使用了属性 border-collapse: separate 和 border-spacing: 10px 0;这里的边框间距负责列分隔。请帮助如何删除由边框间距制成的表格的这个单个空白...请在下面的评论中找到 js fiddle 链接

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，大部分添加在最后一行)