css表列问题？答案

【问题标题】：css table column issue?css表列问题？
【发布时间】：2014-01-29 23:34:15
【问题描述】：

大家好，

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

对于表格类，我使用了属性边框折叠：分离和边框间距：10px 0；此处的边框间距负责列分隔。请帮助如何删除由边框间距制成的表格的单个空白...请在下面的cmets中找到js小提琴链接

【问题讨论】：

给我们一个演示，据我所知，是空白问题
嘿，Alien，谢谢，但我在这里将边框间距应用于 td 标签，这导致了预期的列分离，但现在可以删除前 2 列之间的间距
我们需要源代码来找出问题所在
@Kingisback 给我们一个小提琴，我会为你解决
嘿，看看这个jsfiddle.net/84LXL/1

标签： css html twitter-bootstrap-3

【解决方案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，大部分添加在最后几行）

【讨论】：

如果你需要条纹（在你的小提琴中看不到），那么它们可以在 em 中作为重复的线性渐变和背景大小应用，并使用 rgba 颜色填充背景和阴影
嘿，GCyrillus，谢谢，但我只是不想要第 1 列和第 2 列之间的空白，我需要其他 2 个空白
您是否尝试过折叠或间距：0 并为最后 2 个 tds 使用边框或填充，请参阅选择器，例如 nth-last-of-type(2);
Hey nth type 是不错的选择，但它在 ie 8 中不起作用 :( 。我尝试为第一列的 td 设置间距 0 但不起作用
看看这个带有border-right和你的CSS的一些更新（bootstrap在许多论坛上似乎经常不友好地调整）jsfiddle.net/84LXL/4（删除位置：相对并摆脱css 中的 sep，实际上 html 中不再需要 :)