Equal inner table cell spacing - just CSS width and padding

7 years 11 months ago

Instead of padding the left and right side of all your table cells you only want to pad the inner cells.  You want the table of images, perhaps, to fill the entire content area, but you want the images spaced the same inside the content.

Also, you may not have control over the markup of the site, and need to just use width and padding for the four cells.

This requires some math.  Lets start with 4 cells.

[22 | >3]   [<1 | 22% | >2]   [<2 | 22% | >1]   [<3 22%]

The trick is to have the cell width + padding all be the same and the padding total of each of the inner two edges also be the same.  The code below uses the views grid markup in Drupal 7.

4 Column Table CSS Code

.cols-4 td{
width:22%; 
}
.cols-4 td.col-1{
padding-right:3%
}
.cols-4 td.col-2{
padding-left:1%;
padding-right:2%;
}
.cols-4 td.col-3{
padding-left:2%;
padding-right:1%;
}
.cols-4 td.col-4{
padding-left:3%;
}

3 Column Table CSS Code

.cols-3 td{
width:31%;
}
.cols-3 td.col-1{
padding-right:2.3%
}
.cols-3 td.col-2{
padding-left:1.15%;
padding-right:1.15%;
}
.cols-3 td.col-3{
padding-left:2.3%;
}

2 Column Table CSS Code

.cols-2 td{
width:48%;
}
.cols-2 td.col-1{
padding-right:2%
}
.cols-2 td.col-2{
padding-left:2%;

< Return to Code Listing