CODEWITHSUNDEEP
csshtmltwitter-bootstrap-3
Kingisback
Kingisback

Reputation: 155

css table column issue?

enter image description here

Hey guys,

I am using bootstrap 3 ,i have created a table which is of responsive type .The table is divided into 4 columns and each column is separated by white space.But as per my requirement i dont need the white space after first columns as shown in image with red arrow .

To the table class i have used properties border-collapse: separate and border-spacing: 10px 0; border spacing here is responsible for column seperation.Please help how to do remove this single white space of the table made by border spacing ... please Find js fiddle link in below comments

Upvotes: 0

Views: 103

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105883

You could , fill that white space with a border (giving the relative position and some other extra CSS) : for instance :

.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/ (some css removed and mostly added on last lines )

Upvotes: 1

Related Questions