I'm attempting to apply a table border only to the inner sections, excluding the borders on the first and last cells.
My attempt so far:
.grid > div:last-of-type {
border-right: none;
}
In the image provided, you can see that the last cell is now 5px wider than the rest. This is due to it trying to fill the empty space left after removing the padding... How can I eliminate the padding while keeping its height consistent with the others? Is there a way for all of them to stretch to fit? Please consider that adding a fixed height is not an option as the number of cells may change and their heights could vary.
I also attempted to add border-collapse:collapse;, which did stretch them (GREAT!), but the middle cell ended up slightly smaller than the others.
Here is a JsFiddle link: http://jsfiddle.net/ju76y/5/ (Images included in the fiddle)
.grid {
width: 100%;
overflow: hidden;
background-color: green;
display: table;
table-layout: fixed;
word-wrap: break-word;
text-align: center;
letter-spacing: 0px;
word-spacing: 0px;
}
.grid > div {
display: table-cell;
vertical-align: top;
border-right: 5px solid red;
}
.grid > div:last-of-type {
border-right: none;
}